Jump to content
  • entries
    18
  • comments
    0
  • views
    1424

jQuery плавно показать скрыть блок div


Печенег

1072 views

 Share

Скрываем содержимое блока 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.

 Share

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

General chat

Please enter your display name

×
×
  • Create New...

Important Information

Продолжая использовать Веб-сайт ostogramm.ru Вы автоматически соглашаетесь с Privacy Policy и Guidelines, в ином случаи просто покиньте его.