Скрываем содержимое блока div или другого элемента html и реализовываем плавное разворачивание и сворачивание блока по нажатию на ссылку, кнопку или любой другой элемент.
Пример HTML верстки
<div class="full__desc"> <a href="#">Показать полное описание!</a> <div class="hide">Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст.</div> </div>
Код JavaScript
$(function() { $('.full__desc .hide').hide(); $('.full__desc a').on('click', function(event) { event.preventDefault(); $('.full__desc a').not(this).next().slideUp(500); $(this).next().slideToggle(500); }); });
Вот и всё! Рабочий пример ниже.
Пример
See the Pen jQuery плавно показать скрыть блок div by ITwing (@itwing) on CodePen.
0 Comments
Recommended Comments
There are no comments to display.