Як зробити акордеон на css3, free-site-master
Типовий акордеон, але реалізований тільки за допомогою CSS3 властивостей.
Є різні варіанти акордеона побудованого тільки на CSS. але всі вони використовують, як правило, псевдо клас: target. у якого є недоліки, такі як неможливість закриття контенту після розкриття і одночасного відкриття декількох прихованих елементів.
А ось за допомогою прихованих чекбоксів (прапорців) ми можемо управляти відкриттям і закриттям. А для того, щоб одночасно було відкрито тільки один пункт акордеона використовуються radio кнопки.
розмітка HTML
Розглянемо на прикладі, в якому використовуються чекбокси (прапорці) і де одна секція з контентом відкрита за замовчуванням (input повинен бути «checked» (відзначений).
Все буде поміщено в контейнер з класом ac-container. Для кожного пункту у нас буде checkbox. label і article з контентом.
Зауважте, що кожному input ми повинні призначити свій ID, який будемо використовувати в атрибуті label. Це необхідно для перевірки чекбокса, клікаючи по label.
У кожного article буде клас, який допоможе нам визначити висоту, на яку відкриється пункт акордеона. (Оптимально, це звичайно використовувати значення auto для висоти, але тоді у нас не буде анімацію під час відкриття).