Как реализовать аналог jQuery slideToggle на чистом Javascript

29.08.2019

Часто возникает потребность в плавном показе/скрытии контента на клик по элементу. В jQuery для этого есть специальный метод slideToggle, аналога которого в Javascript к сожалению пока нет.

Реализуем логику slideToggle на чистом Javascript. Создадим HTML-элементы:

<a href="#" id="toggler">slideToggle кнопка</a>

<div id="toggle-content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Напишем CSS стили:

#toggle-content{
  -webkit-transition: height .25s ease;
  -o-transition: height .25s ease;
  transition: height .25s ease;
  overflow: hidden;
}

/* Стиль для элемента в текстом если нет класса show */
#toggle-content:not(.show) {
  display: none;
}

 

Теперь напишем логику:

var toggleContent = document.getElementById('toggle-content');

document.getElementById('toggler').addEventListener('click', 
    function (event) {
        event.preventDefault();

        if (!toggleContent.classList.contains('show')) {
            toggleContent.classList.add('show');
            toggleContent.style.height = 'auto';

            var height = toggleContent.clientHeight + 'px';

            toggleContent.style.height = '0px';

            setTimeout(function () {
                toggleContent.style.height = height;
            }, 0);
        } else {
            toggleContent.style.height = '0px';

            toggleContent.addEventListener('transitionend', 
                function () {
                    toggleContent.classList.remove('show');
                }, {
                    once: true
            });
        }
    });

Поскольку реализовать переход transition: height при height: auto нельзя, мы создали Javascript код, который решает эту проблему.

Нам пригодится это решение когда мы захотим разобраться как реализовать accordeon на чистом Javascript.

« список статей