» »

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

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

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

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

На этом все!
Демонстрация
2017-10-10 Просмотров: 615 Комментарий: (9)

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

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

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

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

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