Акордеон на чистому CSS працює на прихованих чекбоксах

67

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

Сьогодні ми розглянемо, як використовуючи комбінації type=”radio”, type=”checkbox”, атрибутів name і checked, ми можемо створити різні функціональні блоки «акордеони». Розкриваються по кліку, панелі з вмістом, в яких один з пунктів буде відкрито відразу, акордеон, в якому будь-кількість елементів може бути відкрито одночасно, і нарешті, варіант, в якому задані пункти будуть розкриті за замовчуванням при початковій завантаженні сторінки.

Переглядаючи приклад, спробуйте змінювати розмір вікна браузера, аж до мінімуму, і ви побачите, як точно «акордеон», підлаштовується під будь-які розміри.

Дивитися Демо

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

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

    Тут розміщуєте будь зміст….

Кілька пунктів розкриті при завантаженні:

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>
  • Заголовок панелі 1

    Тут розміщуєте будь зміст…

  • Заголовок панелі 2

    Тут розміщуєте будь зміст…

  • Заголовок панелі 3

    Тут розміщуєте будь зміст…

  • Заголовок панелі 4

    Тут розміщуєте будь зміст…

  • Заголовок панелі 5

    Тут розміщуєте будь зміст…

  • Заголовок панелі 6

    Тут розміщуєте будь зміст…

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

Весь блок акордеона, збудований у вигляді неупорядкованого списку

    всередині окремих елементів

  • якого, і розміщені теги , для зв’язку з елементами форм , надійно заховані чекбокси type=”checkbox”, а так само самі блоки з вмістом, приховані до пори до часу, які являють собою ніщо інше, як стандартний div контейнер.
    В теге прописуємо атрибут for=”toggle-1″, він задає унікальний ідентифікатор, який визначається за допомогою атрибута id=”toggle-1″ елемента , з яким необхідно встановити зв’язок. Слід пам’ятати про те, що при додаванні нових пунктів в список акордеона, необхідно прописувати свій унікальний id для кожного пункту, ідентифікатор точно відповідає певному блоку.

    Реалізувати розкриття того чи іншого боки при завантаженні сторінки, дуже просто, достатньо необхідного прапорця задати спеціальний атрибут 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.5 rem;
    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.2 em;
    }
    /* міняємо колір фону у активного перемикача */
    .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.2 rem;
    width: auto;
    height: auto;
    /* затримка появи функція анімації */
    -webkit-animation:fadeIn ease-in 0.5 s;
    -moz-animation:fadeIn ease-in 0.5 s;
    animation:fadeIn ease-in 0.5 s;
    }
    /* анімація при появі блоків з вмістом */
    @-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 }
    }

    /**
    * Компоненти акордеона.
    */
    .accordion {
    margin: 0;
    margin-bottom: 1.5 rem;
    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.2 em;
    }/* міняємо колір фону у активного перемикача */.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.2 rem;
    width: auto;
    height: auto;
    /* затримка появи функція анімації */
    -webkit-animation:fadeIn ease-in 0.5 s;
    -moz-animation:fadeIn ease-in 0.5 s;
    animation:fadeIn ease-in 0.5 s;
    }
    /* анімація при появі блоків з вмістом */
    @-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 розкривним блокам, тепер зміст «акордеона» з’являється з невеликою затримкою, кілька плавнів))).

    З Повагою, Андрій .

    Буду всім вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах: