» »

Раскрывающийся контейнер при клике

Раскрывающийся контейнер при клике

Это красивый эффект появление описание или изображение по клику. Также идет закрытие элемента или объекта на вашем сайте. Вы могли увидеть такую работу на многих интернет ресурсах, где больше применяется в различных мануалах. Ведь очень много информации можно спрятать и при желании ее открыть. Подключить все модули и на них размещение сделать.

Благодаря 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>

На этом все!
Демонстрация
10.10.2017 Просмотров: 330 Комментарий: (9)

Поделиться в социальных сетях

Материал разместил

Комментарий: 9
workman
workman 10.10.2017 18:581
0
Вау. Класс )) А кто автор ?)))))))))
milan_shubin
milan_shubin 10.10.2017 19:012
0
Возможно он забыл ставить автором тебя ) 09a
-SAM-
-SAM- 11.10.2017 05:115
0
Так тут нет авторства на решение, просто авторство на материал, вот тема с форума (js не писался тем, кто выложил здесь, как и новшества нет никакого).
Kosten
Kosten 10.10.2017 19:063
0
Автора скинь в ЛС, просто не стал workman писать, просто под авторство у тебя другой логин!
Kosten
Kosten 10.10.2017 21:104
0
workman, поставил на твою демонстрацию, сейчас проверил, вот так получилось, что то не добавил, хотя все скопировал как нужно.

Сразу открывается.

workman
workman 11.10.2017 15:156
0
А такая штучка подключена?
Код
<script type="text/javascript" src="http://zornet.ru/.s/src/jquery-1.10.2.js"></script>
Kosten
Kosten 11.10.2017 16:047
0
Так проверял на сайте jsfiddle.net, что не знаю, где там подключить, с твоего материала перевел на демонстрацию.
-SAM-
-SAM- 11.10.2017 16:229
0
Библиотеку jQuery нужно подключать только к html-файлам, если вы про это говорите, что хотели демо сделать (перед </head> ставится). В сам код шаблона на сайте не нужно подключать (как часть этого решения), поскольку библиотека уже идёт как часть системного кода.
Kosten
Kosten 11.10.2017 16:068
0
А, как тебе эта же функция, только исполнена на CSS, где еще стилистику можно добавить.
avatar