Аккордеон на чистом CSS

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

by Andrey Dobrovoi

HTML

<h1>Аккордеон на чистом CSS</h1>
<!--
  - Используя различные комбинации `type="radio"`, `type="checkbox"`,
  - `name`, и `checked`, мы можем создать аккордеоны, в которых один из
  - пунктов будет открыт сразу; аккордеоны, в которых любое количество элементов могут быть
  - открыты одновременно; аккордеоны, в которых заданные пункты открыты по умолчанию.
  -->
<h2>Один из пунктов открыт сразу</h2>

<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"...

CSS

@charset "UTF-8";
/**
 * Пример концепции аккордеона на чистом CSS.
 *
 * Контейнер акордеона адаптивный и легко встроится
 * в макет любого сайта.
 */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.4;
  padding: 1.5rem;
}

h1, h2 {
  font-weight: 300;
  margin-bottom: 1.5rem;
}

/**
 * Компоненты аккордеона.
 */
.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-size: 18px;
  font-weight: normal;
  cursor: pointer;
  padding: 14px 20px;
  position: relative;
}
/* переключатель вкладок, положение вниз */
    .accordion_trigger:before {
        content: '';
        height: 8px;
        width: 8px;
        display: block;
        border: 2px solid #fefefe;
        border-right-width: 0;
        border-top-width: 0;
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        position: absolute;
        right: 20px;
        top: 24px
    }
    /* активный переключатель, положение вверх */
    .accordion_toggle:checked ~ .accordion_trigger:before {
        border: 2px solid #fefefe;
        border-left-width: 0;
        border-bottom-width: 0;
        top: 24px
    }
/* меняем цвет фона у активного переключателя */
.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);
  max-height: 0;
  margin: 0px;
  overflow:...