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

2 примера создания аккордена без использования скриптов.

Один работает с использованием радиокнопок <input type="radio" /> , а другой с флажками <input type="checkbox" />

Пример аккордеона с одной открытой вкладкой

Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже

Описание вкладки

Описание вкладки

Еще описание вкладки

И еще описание вкладки

Описание вкладки

HTML:

Обратите внимание, что ID для каждой вкладки должны быть уникальные:

<input id="acor1">

<label for="acor1">

CSS:

Пример аккордеона с несколькими открытыми вкладками

Если нужно иметь открытыми несколько вкладок, то просто заменяем кнопки <radio> на флажки <checkbox>

Описание вкладки

Описание вкладки

Еще описание вкладки

И еще описание вкладки

Описание вкладки

Описание вкладки

HTML:

CSS такой же, как в первом варианте

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!