Як зробити акордеон на css3, free-site-master

Як зробити акордеон на css3, free-site-master

Типовий акордеон, але реалізований тільки за допомогою CSS3 властивостей.

Є різні варіанти акордеона побудованого тільки на CSS. але всі вони використовують, як правило, псевдо клас: target. у якого є недоліки, такі як неможливість закриття контенту після розкриття і одночасного відкриття декількох прихованих елементів.

А ось за допомогою прихованих чекбоксів (прапорців) ми можемо управляти відкриттям і закриттям. А для того, щоб одночасно було відкрито тільки один пункт акордеона використовуються radio кнопки.

розмітка HTML

Розглянемо на прикладі, в якому використовуються чекбокси (прапорці) і де одна секція з контентом відкрита за замовчуванням (input повинен бути «checked» (відзначений).

Все буде поміщено в контейнер з класом ac-container. Для кожного пункту у нас буде checkbox. label і article з контентом.

Зауважте, що кожному input ми повинні призначити свій ID, який будемо використовувати в атрибуті label. Це необхідно для перевірки чекбокса, клікаючи по label.

У кожного article буде клас, який допоможе нам визначити висоту, на яку відкриється пункт акордеона. (Оптимально, це звичайно використовувати значення auto для висоти, але тоді у нас не буде анімацію під час відкриття).

Схожі статті