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

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

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

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

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

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

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

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

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

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

HTML:

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

<input id="acor1">

<label for="acor1">

CSS:

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

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

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

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

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

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

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

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

HTML:

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

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

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

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

Комментарии:

  • Александр:

    Не подскажите как скруглить края у аккордеона?

    Ответить
    • Alexander:

      Добавить к классу .acor-container label стиль border-radius: 10px;

      Ответить
      • Александр:

        Спасибо большое! Не знала куда именно это вставить

        Ответить
  • Василий:

    Доброго времени суток. Подскажите пожалуйста как сделать чтобы ширина аккордеона менялась в зависимости от устройства. т.е. аккордеон стал адаптивный под все устройства ? спасибо

    Ответить
    • Alexander:

      А он плавающий же по ширине (100%)
      Это не в нем проблема, а в контейнере, в котором он находится

      Ответить
  • Юлия:

    Здравствуйте! А не подскажите как его по центру страницы разместить?

    Ответить
    • Alexander:

      Примерно так:

      .acor-container {
          margin: 20px auto;
          width: 340px;
      }
      Ответить
  • Саня:

    Спасибо классный аккордиончик

    Ответить
  • Nester:

    Всем доброго дня, подскажите как сделать изначально закрытые вкладки?

    Ответить
  • Герман:

    как сделать чтоб при нажатии на открытый блок он закрывался?

    Ответить
      • Герман:

        что такое жаве?

        Ответить
        • Alexander:

          На JS такое проще сделать

          Ответить
          • давид:

            так в итоге как это сделать?

            Ответить
  • bbobik:

    На мобильных устройствах, при открытии вкладки, прокручивает всю страницу в конец. Если это лендинг пейдж , то использовать этот аккордеон невозможно.

    Ответить
    • bbobik::

      Дополнение: если текста больше чем на страницу.

      Ответить
      • Алексей:

        bbobik.................., нормальный БАЯН - зря грешишь, всё работает в нормуль - ручки только нужны с головой, что бы для себя сие подделать!

        Ответить
    • Сергей:

      Та же проблема, что только не делал - скроллит в конец страницы, плюнул и сделал на jquery из другого примера

      Ответить