Создаем вертикальный аккордеон на CSS3

Следует заметить, что аккордеон полноценно работает только в браузерах поддерживающих свойства CSS3. Для начала мы рассмотрим процесс создания разметки HTML, а также пример с использованием чеков, где по умолчанию открывается один из разделов (элемент ввода должен иметь состояние ‘checked’)



Все элементы помещены в контейнер с классом ac-container. Для каждого элемента определяется чек, метка и содержание статьи. Также следует обратить внимание , что мы задаем каждому элементу ввода ID, который затем используется в атрибуте for метки. Данное действие нужно для отметки чекбокса при нажатии на метку.

Каждая статья имеет класс, который помогает определить высоту полностью раскрытого элемента. (Оптимально использовать ‘auto’ для значения высоты раскрытого элемента, но, к сожалению, в таком варианте не возможна анимация открытия.)

Далее мы рассмотрим стилизацию аккордеона с помощью CSS. Для начала мы определим ширину аккордеона и отцентрируем его:



Далее мы делаем метки похожими на кнопки, задавая для них фоновый градиент. С помощью теней создаем рамку и эффект внутреннего вдавливания. Также устанавливаем свойство z-index равным 20, чтобы разместить элемент сверху всех элементов содержания:



Затем делаем активность пунктов при наведении курсора мыши:



При нажатии кнопки мыши на метке, чекбокс становится отмеченным, это делаем следующим образом:



Добавим небольшую иконку стрелки при наведении курсора мыши. Для этого мы просто используем псевдо-класс “after”, чтобы обойтись без ненужной разметки:



Для отмеченного пункта будем выводить стрелку вверх:



И убираем иконку для закрытого пункта:



Далее мы добавляем трансформацию для высоты и тени. Трансформация будет работать при "закрывании" пункта. Мы определяем трансформацию для выбранного пункта.



Затем необходимо определить стиль для содержания:



Теперь определяем три класса с для разных высот, чтобы сделать анимацию открывания/закрывания пунктов:



Использование для высоты значения “auto” в данном случае может быть лучше. Но так как мы делаем анимацию, то нужно иметь определенное значение высоты.