Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Уроки » Аккордеон на чистом 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 раскрывающимся блокам, теперь содержание «аккордеона» появляется с небольшой задержкой, несколько плавней))).

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

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

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

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

Отправляя к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