Главная » Уроки » Аккордеон на чистом CSS работающий на скрытых чекбоксах

Аккордеон на чистом CSS работающий на скрытых чекбоксах

Предлагаю очередной вариант компактного блока «», или если хотите, раскрывающегося меню, сформированного на чистом CSS, и работающего на скрытых чекбоксах, используя различные комбинации type="radio" и type="".
Не оставляю попытки найти самое оптимальное решение, с минимальным кодом, концепт «аккордеона» на чистом CSS, без использования js, которую бы поддерживали все современные браузеры. Идея конечно не нова, вариантов исполнения существует довольно много, об одном интересном решении я уже расписывал во всех подробностях, в одной из предыдущих статей.

Сегодня мы рассмотрим, как используя комбинации type="radio", type="checkbox", атрибутов name и checked, мы можем создать различные функциональные блоки «аккордеоны». Раскрывающиеся по клику, панели с содержанием, в которых один из пунктов будет открыт сразу, аккордеон, в котором любое количество элементов может быть открыто одновременно, и наконец, вариант, в котором заданные пункты будут раскрыты по умолчанию при первоначальной загрузке страницы.
 
Аккордеон на чистом CSS
 
Просматривая пример, попробуйте изменять размер окна браузера, вплоть до минимума, и вы увидите, как точно «аккордеон», подстраивается под любые размеры.

Один из пунктов открыт сразу:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<ul class="accordion">
    <li class="accordion_item">
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-01" checked hidden>
        <label class="accordion_trigger" for="toggle-01">Заголовок панели 1</label>
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-02" hidden>
        <label class="accordion_trigger" for="toggle-02">Заголовок панели 2</label>
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-03" hidden>
        <label class="accordion_trigger" for="toggle-03">Заголовок панели 3</label>
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-04" hidden>
        <label class="accordion_trigger" for="toggle-04">Заголовок панели 4</label>
        <div class="accordion_target">
            <p>
                Здесь размещаете любое содержание....
            </p>
        </div>
    </li>
</ul>

Несколько пунктов раскрыты при загрузке:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<ul class="accordion">
    <li class="accordion_item">
        <input type="checkbox" class="accordion_toggle" id="toggle-05" hidden>
        <label class="accordion_trigger" for="toggle-05">Заголовок панели 1</label>
        <div class="accordion_target">
            <p>
               Здесь размещаете любое содержание...
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <input type="checkbox" class="accordion_toggle" id="toggle-06" checked hidden>
        <label class="accordion_trigger" for="toggle-06">Заголовок панели 2</label>
        <div class="accordion_target">
            <p>
               Здесь размещаете любое содержание...
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <input type="checkbox" class="accordion_toggle" id="toggle-07" checked hidden>
        <label class="accordion_trigger" for="toggle-07">Заголовок панели 3</label>
        <div class="accordion_target">
            <p>
               Здесь размещаете любое содержание...
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <input type="checkbox" class="accordion_toggle" id="toggle-08" hidden>
        <label class="accordion_trigger" for="toggle-08">Заголовок панели 4</label>
        <div class="accordion_target">
            <p>
               Здесь размещаете любое содержание...
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <input type="checkbox" class="accordion_toggle" id="toggle-09" hidden>
        <label class="accordion_trigger" for="toggle-09">Заголовок панели 5</label>
        <div class="accordion_target">
            <p>
               Здесь размещаете любое содержание...
            </p>
        </div>
    </li>
    <li class="accordion_item">
        <input type="checkbox" class="accordion_toggle" id="toggle-10" hidden>
        <label class="accordion_trigger" for="toggle-10">Заголовок панели 6</label>
        <div class="accordion_target">
            <p>
               Здесь размещаете любое содержание...
            </p>
        </div>
    </li>
</ul>

Выше, я привел пример кода html аккордеона в двух вариациях, первый это когда при загрузке страницы, один из пунктов загружается сразу в раскрытом виде, во втором случае, заданы два пункта раскрытые при первичной загрузке. Вся конструкция аккордеона в обоих вариантах практически одинакова, за исключением значений id/for и комбинаций атрибута checked.

Весь блок аккордеона, выстроен в виде неупорядоченного списка <ul>, внутри отдельных элементов <li> которого, и размещены теги <label>, для связи с элементами форм <input>, надёжно спрятанные чекбоксы type="checkbox", а так же сами блоки с содержанием, скрытые до поры до времени, которые представляют из себя ничто иное, как стандартный div-контейнер.
В теге <label> прописываем атрибут for="toggle-1", он задает уникальный идентификатор, определяемый с помощью атрибута id="toggle-1" элемента <input>, с которым и необходимо установить связь. Следует помнить о том, что при добавлении новых пунктов в список аккордеона, необходимо прописывать свой уникальный id для каждого пункта, идентификатор точно соответствующий определённому блоку.

Реализовать раскрытие того или иного бока при загрузке страницы, очень просто, достаточно необходимому флажку <input type="checkbox"> задать специальный атрибут checked, который и определяет активный элемент, т.е. попросту, делает переключатель активным, в случае с нашим аккордеоном, появляется скрытый блок с содержанием.

 
Аккордеон на чистом CSS3
 
Все элементы аккордеона, включая пункты с заголовками, скрытые чекбоксы с блоками контента, через определённые классы связаны с CSS, для формирования стилей и определения необходимых функций.

{ CSS }

Комментарии к основным разделам кода, помогут вам быстрее разобраться что к чему. Хочу лишь заострить ваше внимание на одном моменте. Скрытие чекбоксов и блоков с содержанием, в данном варианте, организовано с помощью свойства clip с нулевыми значениями, срабатывает свойство только для элементов с абсолютным позиционированием.
И ещё, хитрость в том, что в добавок, мы выставляем этим элементам минимальные значения ширины и высоты width: 1px; и height: 1px; соответственно, а свойству overflow присвоим значение hidden, которое отображает только область внутри блочного элемента, а остальное будет скрыто. Логика решения просматривается явно))). В чём то может и витиевато, но срабатывает надёжно.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/**
* Компоненты аккордеона.
*/
.accordion {
  margin: 0;
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}
.accordion_item {
  border-bottom: 1px solid #5a95fd;
}
.accordion_item:last-of-type {
  border-bottom: none;
}
/**
* Элемент label который запускает открыть/закрыть.
*/
.accordion_trigger {
  display: block;
  background-color: #007ccf;
  color: #ddd;
  font-weight: normal;
  cursor: pointer;
  padding: 1.2em;
}
 
/* меняем цвет фона у активного переключателя */
 
.accordion_toggle:checked ~ .accordion_trigger {
  background-color: #006bb3;
}
 
/**
 * эти элементы radio/checkbox всегда должны быть скрыты.
 */
.accordion_toggle {
  position: absolute;
  display: none;
}
/**
* скрытое содержание аккордеона.
*/
.accordion_target {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  background-color: #ddd;
  color: #444;
}
/**
* когда переключатель checked на radio/checkbox, показать содержимое аккордеона.
*/    
.accordion_toggle:checked ~ .accordion_target {
  position: static;
  overflow: visible;
  clip: auto;
  margin: auto;
  padding: 1.2rem;
  width: auto;
  height: auto;
/* задержка появления  функция анимации */
  -webkit-animation:fadeIn ease-in 0.5s; 
  -moz-animation:fadeIn ease-in 0.5s;
  animation:fadeIn ease-in 0.5s; 
}
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}

На этом, пожалуй и всё! Если что то упустил и кого то оставил в полных «непонятках», спрашивайте в комментариях. Тем кому не чужды эксперименты, думаю будет интересно данный способ реализации «аккордеона» на страницах сайтов. Весь «винегрет» выложил в онлайн-редакторе, вся начинка в нём, видна как на ладони.

Обновления:
По просьбам трудящихся добавил чуточку анимации @keyframes раскрывающимся блокам, теперь содержание «аккордеона» появляется с небольшой задержкой, несколько плавней))).

С Уважением, Андрей .

Буду всем благодарен, если поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

20 комментариев
  1. Алексей:

    Супер!

    Ответить
  2. Galina:

    Очень понравился аккордеон. А нельзя ли сделать так, чтобы первоначально все пункты были закрыты? Спасибо. А вообще, очень нравится сайт, жаль что раньше не попадался на глаза.

    Ответить
    • driver:

      Здравствуйте, Galina.

      Сделать так, чтобы при загрузке все пункты были закрыты очень просто, достаточно убрать атрибут checked, в данном примере, у первого элемента:

      <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-01" checked>

      В итоге получаем следующее:

      <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-01">

      Всё! Теперь при следующей загрузке, аккордеон будет с закрытыми «мехами»(панелями) ))) .

      Ответить
      • Galina:

        Добрый вечер! Я поняла вас. Огромное спасибо. Если я воспользуюсь этим аккордеоном, я не нарушу авторские права? Еще раз спасибо.

        Ответить
        • driver:

          Пользуйтесь на здоровье. Собственно для этого он и создавался )) Ну, а если планируете использовать данное решение не в качестве элемента своего сайта, а написать урок, например, обратная ссылка на первоисточник, в таком случае, очень даже приветствуется.

  3. Владимир:

    Добрый день!

    Огромное спасибо за аккордеон, и столь подробное разъяснение!

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

    Ответить
    • driver:

      Здравствуйте, Владимир.

      Всё очень просто.

      В тегах <input>, вместо type="radio" используйте type="checkbox"

      Ответить
      • Владимир:

        Спасибо, так срабатывает, однако пропадает эффект когда при клике на закрытый блок, предыдущий открытый автоматически закрывается.

        Т.е. при использовании checkbox уходит функционал только одной открытого аккордеона.

        Можно ли добиться такого?

        Заранее благодарен!

        Ответить
  4. Николай:

    Здравствуйте, аккордеон хорош! 🙂 Возможно ли сделать его двухуровневым?

    Ответить
  5. zuleyxa:

    spasibo. super

    Ответить
  6. Виктор:

    Аккордеон шикарный! Спасибо! А есть ли возможность ставить ссылку-якорь на конкретную вкладку аккордеона, чтобы она сама раскрывалась по ссылке? С таргет такое делается, а вот как быть с чекбоксами?

    Ответить
  7. Виктор:

    Еще хотелось бы сделать подсветку активного пункта

    Ответить
  8. О Боги! Спустя день кавыряния я наткнулся на этот замечательный Аккордеон, который таки встал на джумлу и замечательно работает! Хвала создателю столь функциональной и логичной штуки.)

    Ответить
  9. Богдан:

    Как можно изменить цвет активного пункта меню, поскажите пожалуйста?

    Ответить
    • Кирил:

      Да мне тоже такое надо что-бы подсветить активный пункт! Помогите пожалуйста

      Ответить
    • driver:

      Вот так:

      /* меняем цвет фона у активного переключателя */ .accordion_toggle:checked ~ .accordion_trigger { background-color: #005d9c; }

      Сделал по-умолчанию, внёс изменения в статью, в демо и исходники. Но не всё так просто, пришлось немного подкорректировать html-разметку аккордеона. В частности, тегам <input> прописал атрибут hidden и переместил их непосредственно перед тегами <label>

      Покопаться в коде можно здесь

      Ответить
  10. Здравствуйте!

    Спасибо за прекрасный аккордеон. Сработал замечательно. Подскажите, куда и как можно добавить символы — и + в круге, чтобы при активном окне отображался — , а при свернутой вкладке отображался +.

    Автору заранее спасибо!

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru