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

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

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

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

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

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

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

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

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

HTML:

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

<input id="acor1">

<label for="acor1">

CSS:

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

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

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

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

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

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

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

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

HTML:

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

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

Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции

Очень простое, удобное и функциональное меню на jQuery

Полноэкранное мобильное меню с фиксированной иконкой-гамбургер

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

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

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

  • Алексей:

    Читал, что длинные вложенности в css это плохо, так как влияет на скорость загрузки страницы. А у вас присутствуют. Есть мнение, что лучше добавить class или id.

    Ответить
    • Alexander:

      не понял про вложенность...
      весь CSS до 500кб это хорошо, но 100 конечно же лучше 🙂

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

        имел в виду длинную вложенность в селекторах css. Например у вас было в css:
        19 строка .acor-container .acor-body p {
        margin: 0 0 10px;
        }

        Ответить
        • Alexander:

          Input и label идут без класса, поэтому для всей конструкции я прописал родителя acor-container.
          Для .acor-body p он не нужен, но это капля в океане, если брать в расчет скорость загрузки страницы.

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

            Input и label нельзя класс задать?

            Ответить
            • Alexander:

              Можно, а зачем? 🙂
              10 раз писать class=""acor-input" и class=""acor-label" ?
              Так, по вашему, проще ?

              Ответить
            • Alexander:

              Я не знаю, что и где вы прочитали, но просто включите логику 🙂
              Есть, например класс, который часто встречается в шаблонах

              .price-page .price-section .price-container .block-price .price-text .price-text-val {}
              

              Т.е. привязка идет от головы страницы. Почему она не удобна? Не потому, что там лишних 65 байт, что в целом будет 6кб, если использовать 100 раз ее.

              А потому что, если вам потребуется взять оформление текста .block-text-val в теле на странице услуги, то не получится, не говоря уже, если нам потребуется поставить всю секцию. И вот это не удобно.

              Баланс должен быть между тем, что удобно писать и удобно использовать.

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

    Подскажите, пожалуйста, как сделать чтобы при открытии страницы в браузере все вкладки аккордеона находились в свернутом (закрытом) состоянии? И только после клика мышкой на нужную - она разворачивалась. Заранее благодарю.

    Ответить
    • Alexander:

      Удалить checked="checked"

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

        Огромное спасибо!!!!

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

        Я удалил атрибуты name и checked и все равно все работает нормально. Зачем вы их добавили, если без них тоже работает?

        Ответить
  • Evgeniy:

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

    Ответить
    • Alexander:

      Как вариант:

      .acor-container label {
          pointer-events: none;
      }
      .acor-container label:before {
          pointer-events: auto;
      }
      Ответить
      • Evgeniy:

        Благодарю, работает

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

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

    Ответить
    • Alexander:

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

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

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

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

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

    Ответить
    • Alexander:

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

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

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

    Ответить
    • Alexander:

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

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

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

    Ответить
  • Nester:

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

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

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

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

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

        Ответить
        • Alexander:

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

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

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

            Ответить
  • bbobik:

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

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

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

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

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

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

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

      Ответить