Спойлер на чистом JavaScript и CSS

Анимированный спойлер на JavaScript и CSS

Или ода overflow

Долгое время я искал достаточно простой и понятный для меня анимированный спойлер плавно скрывающий текст. Мне хотелось найти решение без использования дополнительных библиотек или плагинов для WordPress, хотя ниже я приведу пример с использованием jQuery для сравнения. Для меня решением стало совместное использование transition свойства CSS и изменения высоты элемента с помощью JavaScript. Также ключевым моментом стало использование свойства overflow давайте рассмотрим как это работает.

Далее под тремя спойлерами я размещу коды для HTML, CSS и Javascript. Для HTML создаем кнопку с классом spoilerButton и контенер для всего что нужно скрыть с классом spoilerText.Также в кнопке необходимо добавить обработчик событий onclick с функцией spoiler() которая будет выполняться в javascript.

Открыть код html
        <div class="spoilerButton" onclick="spoiler1()" id="spoilerButton"> 
                <span>Click for open</span>
        </div>
            <div class="spoilerText" id="spoilerText">
                <span>
			Тут распологается текст спойлера
                </span>
            </div>
            

Далее основная начинается основная магия в CSS. Помимо внешнего вида, ключевыми своййствами CSS для спойлера стали transition: height 1s задающее скорость изменения высоты спойлера ( которая меняется в javascript) и свойство overflow: hidden скрывающее содержимое спойлера, когда он закрыт. Именно это свойство позволило сделать спойлер плавным. Остальные свойства задют внешний вид раскрывающегося текста.

Открыть код CSS
        .spoilerButton {
            width: 100%;
            padding: 10px 0 10px 0;
            background: #36abfc;
            text-align: center;
            font-family: arial;
            color: white;
            cursor: pointer;
            transition: width 1s;
            font-weight: bold;
			border-radius: 5px;
        }
		.spoilerButton:hover {
			background: #0090f7;
		}
        .spoilerText {
            width: 90%;
            height: 0px;
            padding: 0 15px 0 15px;
			margin: 0 10px 0 10px;
            background: #eeeff5;
            display: block;
			overflow: hidden;
			transition: height 1s;
			text-align: left;
        }
        .spoilerSpan { 
            font-family: arial;
        }

И последний по порядку, но не по значению код в Javascript. Получив доступ к элементу spoilerText мы посто изменяем его высоту с помощью изменения стилей text.style.height = «100px» и запонимаем текущее положение спойлера в переменную flag.

Открыть код javascript
        <script>
			var flag = 0;
            function spoiler() {
                var text = document.getElementById("spoilerText");
                var button = document.getElementById("spoilerButton");
               
			if(flag == 0 ) {
                text.style.height = "300px";
                text.style.overflow = "scroll";
                flag = 1;
			//	console.log(flag);		
            }
             else {
				text.style.height = "0px";
text.style.overflow = "hiden";
                flag = 0;
			}
            }
        </script>

Для создания нескольких раскрывающихся писков на странице достаточно поменять индексы у элемента id=»spoilerButton3″ и функции onclick=»spoiler3()» в двух местах, в html и javascript. Настройка длинны спойлера производится в ручную в javascript text.style.height = «320px», на данный момент меня это вполне устраивает, хотя есть над чем подумать. Код работает одинаково хорошо в Google Chrome и Internet Explorer.

Поэсперементировать с кодом можно в онлайн редакторе sololeran sololearn Также даю ссылку на обещанный спойлер на jQuery Он подстраивает длинну автоматически, но мне нравится знать «что под капотом».

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *