Сегодня создадим на чистом JS коде – меню аккордеон с тремя секциями, при клике на которые, будет открываться панель с текстом, а при втором клике обратно закрываться.
Сегодня создадим на чистом JS коде – меню аккордеон с тремя секциями, при клике на которые, будет открываться панель с текстом, а при втором клике обратно закрываться.
Меню аккордеон обычно используют для блока часто задаваемых вопросов.
Демонстрация меню аккордеон.
HTML структура
Создадим 3 кнопки с классом accordion, ниже которых поместим дивы с классом panel. Внутри блоков, будут параграфы с текстом.
<button class="accordion">Вопрос 1</button>
<div class="panel">
<p>Ответ на Вопрос 1...</p>
</div>
<button class="accordion">Вопрос 2</button>
<div class="panel">
<p>Ответ на Вопрос 2...</p>
</div>
<button class="accordion">Вопрос 3</button>
<div class="panel">
<p>Ответ на Вопрос 3 ...</p>
</div>
Картинка пока невзрачная, добавим стилей и спрячем секции с текстом.
CSS код
Стилизация кнопок, которые используются для открытия и закрытия панели аккордеона.
.accordion {
background-color: #cfd8dc;
color: #fff;
…
}
При наведении курсора на кнопку и при клике по ней, будет меняться цвет фона. Для смены цвета при клике, мы повесим на функцию в JS класс active.
.active, .accordion:hover {
background-color: #607d8b;
}
Стилизация блоков с текстом (ответы на вопросы). По умолчанию эти блоки спрятаны за счет нулевого свойства максимальной высоты.
.panel {
..
max-height: 0;
overflow: hidden;
..
}
JS код
Объявим две переменные, первая переменная будет получать элемент по названию класса accordion. Вторая переменная с названием i.
var acc = document.getElementsByClassName("accordion");
var i;
В цикле for, мы перебираем весь массив элементов с классом accordion, то есть будут выводиться все заголовки.
for (i = 0; i < acc.length; i++) {
На каждый из элементов мы добавляем действие по клику, будет выполняться функция, когда ко всем элементам в массиве применяется метод toggle.
acc[i].addEventListener("click", function() {
Метод toggle добавляет и удаляет класс active для замены цвета кнопки, управляющей панелью.
this.classList.toggle("active");
Назначаем переменной с названием panel – свойство nextElementSibling, это переключатель между скрытием и показом активной панели.
var panel = this.nextElementSibling;
Для раскрытия, спрятанных блоков с текстом (эффект аккордеона), надо менять максимальную высоту, в зависимости от высоты панели на разных размерах экрана. Сначала делаем проверку, если значение максимальной высоты в стилях для блока с классом panel, равно нулю, то новая максимальная высота станет больше на энное количество пикселей, в зависимости от размера экрана у пользователя.
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Добавление иконок
Для наглядности все кнопки следует снабдить символами, где символ плюс указывает на сложенный аккордеон, а минус – на раскрытый. При клике на кнопку, знак плюс меняется на знак минус.
Это подходящий случай для применения псевдокласса after. Код для content, можно найти в таблице символов Юникода.
.accordion:after {
content: '\002B'; /* Код Юникода для символа "плюс" (+) */
color: #fff;
font-size: 18px;
float: right;
margin-left: 4px;
}
.active:after {
content: "\2212"; /* Код Юникода для символа "минус" (-) */
}
Меню аккордеон надо использовать на сайтах, в целях экономии места и удобства получения информации.
На CodePen вы можете увидеть весь код меню аккордеон на чистом JS, который можно скачать и использовать в своих проектах.
See the Pen Menu accordion pure JS by porsake (@porsake) on CodePen.
