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

В новой записи мы с вами рассмотрим как сделать простые табы на чистом CSS. я подробно разберу весь код и предоставлю все исходники .

HTML

Внутри элемента с классом demo размещаются все элементы используемые для создания табов. Для всех табов используется одинаковая конструкция: input, label и div для контейнера с текстом. Для элемента input нужно прописать уникальный идентификатор, в моём случае hd-1 и hd-2. То же значение нужно прописать внутри элемента label в качестве атрибута for.

 <div class="demo">
    <input class="hide" id="hd-1" type="checkbox">
    <label for="hd-1">Нажмите здесь, чтобы прочитать больше о HTML!</label>
    <div>
        HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..
    </div>
        <br/>
        <br/>
    <input class="hide" id="hd-2" type="checkbox">
    <label for="hd-2">Нажмите здесь, чтобы прочитать больше о CSS!</label>
    <div>
        CSS - CSS Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
    </div>
</div>

CSS

input будет скрыт, мы будем улавливать нажатие на него и тем самым изменять css стили у остальных элементов.

/* demo контейнер */
.demo {
    max-width: 1024px;
    padding: 0 20px;
    margin: 5% 10%;
}
/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
    display: none;
}
/* вид текста label */
.hide + label {
    margin: 0;
    padding: 0;
    color: green;
    cursor: pointer;
    display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block; 
    background: #efefef;
    padding: 10px;
    /* чуточку анимации при появлении */
     -webkit-animation:fade ease-in 0.5s; 
     -moz-animation:fade ease-in 0.5s;
     animation:fade ease-in 0.5s; 
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }   
}
.hide + label:before {
    background-color: #1e90ff;
    color: #fff;
    content: "\002B";
    display: block;
    float: left;
    font-size: 14px; 
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    margin: 3px 5px;
    text-align: center;
    width: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.hide:checked + label:before {
    content: "\2212";
}