Создаем вертикальный аккордеон на CSS3Некоторую информацию необходимо скрыть на сайте, но в тоже время чтобы она была на виду. В сегодняшнем уроке будем использовать только скрытые элементы ввода мы создадим вертикальный аккордеон с анимацией используя CSS3. Подобных аккордеонов достаточно много можно найти в сети, но не все поддерживают псевдо-класс для закрытия или одновременного открытия нескольких разделов. С помощью скрытых чеков мы сможем контролировать данный процесс при этом создать уникальный аккордеон.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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