7 455 Скрипты / Accordion

Аккордеон на CSS3

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

Есть разные варианты аккордеона построенного только на CSS, но все они используют, как правило, псевдо класс :target, у которого есть недостатки, такие как невозможность закрытия контента после раскрытия и одновременного открытия нескольких скрытых элементов.

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

HTML

Рассмотрим на примере, в котором используются чекбоксы (флажки) и где одна секция с контентом открыта по умолчанию (input должен быть "checked" (отмечен)).
Всё будет помещено в контейнер с классом ac-container. Для каждого пункта у нас будет checkbox, label и article с контентом.

<section class="ac-container">
    <div>
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <label for="ac-1">О нас</label>
        <article class="ac-small">
            <p>Контент...</p>
        </article>
    </div>
    <div>
        <input id="ac-2" name="accordion-1" type="checkbox" />
        <label for="ac-2">Услуги</label>
        <article class="ac-medium">
            <p>Контент...</p>
        </article>
    </div>
    <div>
         <!-- ... -->
    </div>
</section>

Заметьте, что каждому input мы должны назначить свой ID, который будем использовать в атрибуте label. Это необходимо для проверки чекбокса, кликая по label.
У каждого article будет класс, который поможет нам определить высоту, на которую раскроется пункт аккордеона. (Оптимально, это конечно использовать значение auto для высоты, но тогда у нас не будет анимации при открытии).

CSS

Определяем стили:

Скачать 2655Загрузок 8,52 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи