Skip to content

Аккордеон на CSS

Привет, друзья. Помнится, была у меня уже неудачная попытка создать аккордеон на CSS. Тогда он разворачивался только при наведении на элемент, а не по клику. Но сегодня, вдохновившись результатами уроков Секундомер на CSS и Замена элемента «select» на CSS, я смог осуществить свою задумку.

В данном уроке мы рассмотрим принцип работы данного аккордеона. И прежде, чем начать, посмотрите демонстрацию и скачайте исходники:

Идея

В CSS мы можем распознать выбранные чекбоксы / радио-кнопки через псевдо-класс :checked, а через «соседский» селектор произвести манипуляции со следующим за выбранным чекбоксом элементом. Если мы будем использовать нестандартную структуру HTML, то сможем использовать данные свойства для реализации аккордеона.

HTML

Вот наш нестандартный каркас для аккордеона. В таком представлении будет открыта только одна панель, а другая закрываться. Если вы хотите, чтобы можно было открыть несколько панелей, то замените <input type="radio" на <input type="checkbox":

<div class="accordion radio">
    <label for="panel1">Panel 1</label>
    <input id="panel1" name="radio" type="radio" />
    <div class="panel">
        <h1>Panel 1 Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et illo illum vel vero veniam blanditiis laboriosam animi labore atque accusantium amet excepturi voluptates perspiciatis doloribus ipsum harum nobis quam reiciendis.</p>
    </div>
    
    <label for="panel2">Panel 2</label>
    <input id="panel2" name="radio" type="radio" />
    <div class="panel">
        <h1>Panel 2 Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et illo illum vel vero veniam blanditiis laboriosam animi labore atque accusantium amet excepturi voluptates perspiciatis doloribus ipsum harum nobis quam reiciendis.</p>
    </div>
    
    <label for="panel3">Panel 3</label>
    <input id="panel3" name="radio" type="radio" />
    <div class="panel">
        <h1>Panel 3 Content</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et illo illum vel vero veniam blanditiis laboriosam animi labore atque accusantium amet excepturi voluptates perspiciatis doloribus ipsum harum nobis quam reiciendis.</p>
    </div>
</div>

CSS

Будем придерживаться Flat design, о котором можете почитать в недавней статье «Плоский веб-дизайн: тренд или революция?»:

.accordion label {
    display: block;
    padding: 1em;
    font-weight: 700;
    font-size: 1.5em;
    background: #16A085;
    color: #f5f5f5;
    cursor: pointer;
    border-bottom: 1px solid #1ABC9C;
}

.accordion label:hover {
    background: #2fe2bf;
}

.accordion .panel {
    height: 0;
    visibility: hidden;
    opacity: 0;
    background: #1ABC9C;
    color: #f0f0f0;
}

/* Hide checkboxes and radio-buttons */
.accordion input[type="radio"], .accordion input[type="checkbox"] {
    display: none;
}

Показываем .panel, соответствующий выбранному чекбоксу / радио-кнопке.

/* Show .panel for corresponding to checked radio or checkbox */
.accordion input[type="radio"]:checked + .panel,
.accordion input[type="checkbox"]:checked + .panel {
    height: auto;
    visibility: visible;
    opacity: 1;
    padding: 1.5em;
}