Как сделать — Складывающийся/Аккордеонный контент (Меню-аккордеон)
Узнайте, как создать меню-аккордеон (складывающийся контент).
Аккордеон
Аккордеоны полезны, когда вы хотите переключаться между скрытием и отображением большого количества контента:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Создать Аккордеон
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
/* Стиль кнопок, которые используются, чтобы открыть и закрыть панель аккордеона */
.accordion <
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
>
/* Добавьте цвет фона к кнопке, если она нажата (добавьте класс .active с помощью JS) и при наведении на нее указателя мыши (наведите курсор мыши) */
.active, .accordion:hover <
background-color: #ccc;
>
/* Стиль панели аккордеона. Примечание: по умолчанию скрыто */
.panel <
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
>
Шаг 3) Добавить JavaScript:
Пример
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) <
acc[i].addEventListener("click", function() <
/* Переключение между добавлением и удалением "active" class,
выделить кнопку, управляющую панелью */
this.classList.toggle("active");
/* Переключение между скрытием и отображением активной панели */
var panel = this.nextElementSibling;
if (panel.style.display === "block") <
panel.style.display = "none";
> else <
panel.style.display = "block";
>
>);
>
Анимированный Аккордеон (Скольжение вниз)
Чтобы сделать анимированный аккордеон, добавьте max-height: 0 , overflow: hidden и transition для свойства max-height в класс panel .
Затем используйте JavaScript, чтобы скользить вниз по контенту, установив вычисленную max-height в зависимости от высоты панели на экранах разных размеров:
Пример
<style>
.panel <
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
>
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) <
acc[i].addEventListener("click", function() <
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) <
panel.style.maxHeight = null;
> else <
panel.style.maxHeight = panel.scrollHeight + "px";
>
>);
>
</script>
Добавить иконки
Добавьте символ к каждой кнопке, чтобы указать, является ли разборный контент открытым или закрытым:
Пример
.accordion:after <
content: ‘\02795’; /* Unicode символ для "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
>
.active:after <
content: "\2796"; /* Unicode символ для "minus" sign (-) */
>
Как сделать — аккордеон (разборный контент)
Аккордеоны полезны, когда нужно переключаться между скрытием и отображением большого количества содержимого:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Создание аккордеона
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
/* Style the buttons that are used to open and close the accordion panel */
.accordion <
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
>
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover <
background-color: #ccc;
>
/* Style the accordion panel. Note: hidden by default */
.panel <
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
>
Шаг 3) добавить JavaScript:
Пример
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) <
acc[i].addEventListener("click", function() <
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") <
panel.style.display = "none";
> else <
panel.style.display = "block";
>
>);
>
Анимированный аккордеон (скользить вниз)
Чтобы сделать анимированный аккордеон, Add max-height: 0 overflow: hidden и a transition для свойства Max-Height, в panel класс.
Затем используйте JavaScript для понижения содержания, установив вычисляемый, в max-height зависимости от высоты панели на различных размерах экрана:
Пример
<style>
.panel <
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
>
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) <
acc[i].addEventListener("click", function() <
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) <
panel.style.maxHeight = null;
> else <
panel.style.maxHeight = panel.scrollHeight + "px";
>
>);
>
</script>
Добавить значки
Добавьте символ к каждой кнопке, чтобы указать, является ли складное содержимое открытым или закрытым:
Пример
.accordion:after <
content: ‘\02795’; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
>
.active:after <
content: "\2796"; /* Unicode character for "minus" sign (-) */
>
Creating Accordion with Javascript
In this blog, I am going to create an accordion by using native javascript. No library like jQuery is required. JQueryUI has a built-in accordion component, which is great to use. But as a responsible developer, we should also know how to create one with pure javascript. If you don’t know what accordion is then look jquery one here.
Let’s break down the component into smaller steps.
- Accordion contains list of panels.
- Each panel has two component, header & body.
- Header component of all the panel is always visible.
- A panel can be expanded or collapsed.
- When a panel is expanded, it’s body component becomes visible.
- Only one panel can be expanded at a time.
- When other panel is expanded, last panel’s body component hides.
Let’s build the component with small steps.
Step1 :- Design basic HTML
Let’s create some basic html which creates list of panels with header & body.
Above html contains list of panel. Each panel has header and body item. Currently everything is visible.
Step2 :- Define some CSS to handle visibility
Let’s create two CSS classes to define the visibility of the body.
By default, we want to hide all the panel’s body as per the requirement. Now we need to show only expanded element at a time. We will add active class in the panel div to make the body visible.
Step3 :- Using CSS in the HTML
After adding CSS in our HTML, the code will be
Now all the panel’s body is hidden except the first one. We created our basic accordion component. We need to use some javascript to make it fully functional.
Step4 :- Adding click events
We will add click event on each panel, which will change the visibility of the panel.
initAccordion function is defined to initialize the accordion component. It puts a click event on each panel. When a panel is clicked, it removes the active class from the current active panel and adds it to the new panel. By default, it makes the first panel as active. We can make any panel as active by default by passing the panel element to the showPanel function.
We have created our accordion successfully. This is just a very basic model of accordion but it covers the main functionality.
We can make it more fancy by adding nice css styles, animation and icons. Also, we can make it more performance oriented by implementing event delegation & caching current active elements. Refer my blog on events to learn about events in detail.
Как создать вертикальный аккордеон для сайта
В этой статье разберём как можно очень просто создать вертикальный аккордеон для сайта на чистом CSS и JavaScript, а также, как сделать так, чтобы его контент плавно показывался и скрывался. Кроме этого, рассмотрим пример многоуровневого меню типа аккордеон.
Что такое аккордеон?
Аккордеон – это вертикально сложенный набор заголовков. Каждый из них может быть развернут, чтобы показать содержимое, связанное с ним. Этот элемент так называется из-за того, что принцип его действия напоминает музыкальный инструмент аккордеон.
В данном примере, при показе контента, связанного с заголовком, стрелочка, расположенная справа от него изменяет своё направление на противоположное. Данная стрелочка в этом аккордеоне реализована с помощью псевдоэлемента ::after следующим образом:
Очень часто на сайте аккордеоны используются для создания блока FAQ (последовательность вопросов и ответов).
Пример создания простого аккордеона
Процесс разработки вертикального аккордеона начнём с написания HTML разметки :
- .accordion – это общая обертка для элементов, она непосредственно содержит .accordion__item ;
- .accordion__item – это один элемент, внутри которого располагается заголовок .accordion__header и содержимое .accordion__body ;
- .accordion__header – заголовок, при нажатию на который будет открываться .accordion__body ;
- .accordion__body – содержимое, связанное с заголовком .accordion__header .
Раскрыт или нет .accordion__item определяется посредством класса accordion__item_show . Если данный класс присутствует у элемента, то .accordion__body показывается. В противном случае – нет.
Переключение состояния .accordion__item осуществляется посредством нажатия на заголовок .accordion__header .
Теперь зададим стили для аккордеона : accordion.css. Они очень простые. Разметка заголовка .accordion__header выполняется с помощью CSS Flexbox.
Самое основное, если .accordion__item не имеет класса accordion__item_show , элемент .accordion__body не показывается:
В противном случае .accordion__body показывается.
Остальные стили отвечают только за оформление аккордеона и к функционалу прямого отношения не имеют.
Последнее что осталось – это создать код на JavaScript . Задача JavaScript будет заключаться в переключении класса accordion__item_show у элемента .accordion__item при нажатии на .accordion__header . То есть JavaScript в зависимости от того по какому заголовку кликнули, будет просто добавлять или удалять класс accordion__item_show у .accordion__item :
Здесь приведён фрагмент кода. Он будет выполняться при создании нового экземпляра типа ItcAccordion . this._el будет указывать на общую обертку .accordion . Добавление обработчика события click для элемента this._el осуществляется с помощью метода addEventListener() . В качестве аргумента этому методу мы передаём стрелочную функцию, которая будет вызвана при возникновении данного события на этом элементе. Остальные действия пояснены с помощью комментариев.
Весь код JavaScript: accordion.js.
Как установить аккордеон на сайт
Для этого необходимо:
1. Вставить в нужно место страницы верстку аккордеона:
2. Подключить к странице CSS и JavaScript файлы:
3. Инициализировать корневой элемент аккордеона как ItcAccordion с помощью оператора new :
Свойство alwaysOpen определяет необходимо ли при открытии нового контента закрывать предыдущий. Если false , то необходимо. В противном случае не нужно. Кстати, значение true – это значение по умолчанию и в этом случае его можно не указывать:
Аккордеон с анимацией скольжения
Добавление в аккордеон плавного показа или скрытия контента, связанного с заголовком, выполним на основе материала, приведённого в статье: «Создание аналога slideToggle() на чистом JavaScript».
Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:
Стили аккордеона, включающие в себя анимацию, расположены на GitHub: animated-accordion.css.
Вертикальное меню аккордеон
Пример настройки аккордеона, приведённого выше, для использования его в качестве вертикального меню.
Как видно он имеет точно такую же структуру, только в .accordion__content помещены ссылки.