Раскрывающийся контейнер при клике
Это красивый эффект появление описание или изображение по клику. Также идет закрытие элемента или объекта на вашем сайте. Вы могли увидеть такую работу на многих интернет ресурсах, где больше применяется в различных мануалах. Ведь очень много информации можно спрятать и при желании ее открыть. Подключить все модули и на них размещение сделать. Благодаря Jquery все будет визуально выделяться, но и на стили CSS есть возможность выставит, сто после появятся кнопки, здесь сам веб мастер решает. Главное, что все отрабатывая, и DEMO ниже можно понять, как все будет работать после как все поставите. Кто-то подумает на споллер и будет прав, функциональность похоже, но сам выезд плавнее стандартного. HTML Код <div class="view-source"> <a href="#">ZORNET.RU</a> <div class="hide">Нинтендо Супер NES Classic Edition является спорным, так как продукт был объявлен. Хотя концепция небольшой игровой консоли с отличной эмуляцией была с энтузиазмом воспринята геймерами, прошлогодняя казнь явно не хватало. </div> </div> <div class="view-source"> <a href="#">ZORNET.RU 2</a> <div class="hide">Решение Nintendo убить производство NES Classic оставило тысячи геймеров без возможности купить устройство. Super NES Classic Edition запущен, с несколькими обзорами онлайн. </div> </div> <div class="view-source"> <a href="#">ZORNET.RU 3</a> <div class="hide">Для простоты все ссылки на NES и SNES можно считать относящимися к устройствам Nintendo, запущенным в 2016 и 2017 годах, если специально не указано иное.</div> </div> Ну и в нижнюю часть сайта или отдельным файлом вставляем. Код <script> $(function(){ $('.view-source .hide').hide(); $a = $('.view-source a'); $a.on('click', function(event) { event.preventDefault(); $a.not(this).next().slideUp(500); $(this).next().slideToggle(500); }); }); </script> На этом все! Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 9 | |
| |