Войти
Регистрация

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

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

Здравствуйте, уважаемые читатели!

При создании гармошки на сайте многие пытаются прибегнуть к использованию Javascript или jQuery.

Лично я за минимальное использование кода и программирования для реализации того или иного решения. Самый лучший код это код, которого нет, как говорится.

В этой статье обсудим реализацию аккордеона на сайте с помощью чистого CSS и чекбоксов по аналогии с вкладками на CSS.

Создадим HTML-код аккордеона, примерно на 4 пункта:

<div class="accordeon">
  <div>
    <input type="checkbox" id="acc-1" />
    <label for="acc-1">Главная</label>
      <div class="content">
        <p>Текст пункта аккордеона</p>
      </div>
  </div>

  <div>
    <input type="checkbox" id="acc-2" />
    <label for="acc-2">О нас</label>
      <div class="content">
        <p>Текст пункта аккордеона</p>
      </div>
  </div>

  <div>
    <input type="checkbox" id="acc-3" />
    <label for="acc-3">Контакты</label>
      <div class="content">
        <p>Текст пункта аккордеона</p>
      </div>
  </div>

  <div>
    <input type="checkbox" id="acc-4" />
    <label for="acc-4">Прайс</label>
      <div class="content">
        <p>Текст пункта аккордеона</p>
      </div>
  </div>

</div>

Здесь мы создали главный блок .accordeon и внутри него разместили 4 блока с чекбоксом, его меткой и блоком .content с текстом пункта аккордеона.

Теперь напишем CSS-правила с комментариями:

1. Стилизуем главный блок аккордеона:

.accordeon {
   box-shadow: 0 0 1px rgba(0,0,0,0.2);
   font-family: arial;
   margin: 0 auto;
   width: 350px;
}

2. Далее нам необходимо скрыть чекбокс:

.accordeon input[type="checkbox"] {
   display: none;
}

3. Задаем стиль для метки чекбокса, которая будет служить нам пунктом аккордеона:

.accordeon label {
   background: #2d8bbb;
   color: #fff;
   cursor: pointer;
   display: block;
   height: 30px;
   line-height: 31px;
   padding: 5px 10px;
   position: relative;
   text-transform: uppercase;
   z-index: 2;
}
.accordeon label:last-child {
   border-bottom: 0;
}

4. Задаем стиль метки чекбоса при наведении и при отмеченном чекбоксе, т.е. когда пункт у нас развернут:

.accordeon label:hover,
.accordeon input[type="checkbox"]:checked + label
{
   background: #c6e1ec;
   color: #33778e;
}

5. Далее создадим значок переключателя, используя псевдоэлементы before и after. Переключатель состоит из прямоугольника с шариком внутри.

Создаем прямоугольник:

.accordeon label:after {
   border: 1px solid;
   border-radius: 10px;
   content: "";
   height: 15px;
   position: absolute;
   right: 10px;
   top: 11px;
   width: 35px;
}

Создаем шарик:

.accordeon label:before {
   background: #fff;
   border-radius: 100%;
   content: "";
   height: 13px;
   position: absolute;
   right: 12px;
   top: 13px;
   transition: 0.5s;
   width: 13px;
}

6. Стилизуем область с текстом. Сначала текст у нас скрыт, т.к. блок имеет нулевую высоту height:0, а также нам нужно скрыть содержимое через overflow:hidden:

.accordeon .content {
   border-bottom: 1px solid #dcdcdc;
   height: 0;
   overflow: hidden;
   padding: 0 10px;
   transition: 0.3s;
}

7. Задаем стиль блока с текстом, когда чекбокс отмечен, т.е. когда пункт развернут. Всего 2 свойства: высота блока и анимация развертывания. Анимация происходит за счет плавного увеличения высоты с 0 до 200 пикселей.

.accordeon input[type="checkbox"]:checked ~ div {
   height: 200px;
   transition: 0.3s;
}

И последнее...

8. Когда чекбокс отмечен, т.е. когда пункт развернут, нам нужно, чтобы шарик в переключателе перекрасился в другой цвет и передвинулся с анимацией. Пишем:

.accordeon input[type="checkbox"]:checked ~ label:before {
   background: #2d8bbb;
   right: 32px;
   transition: 0.5s;
}

Этот же аккордеон можно использовать с помощью радиокнопок, тогда при разворачивании одного пункта другой будет схлопываться. Для этого смените в HTML у тега <input> type="checkbox" на type="radio" и задайте им всем атрибут type="name" с одинаковым значением.

Результат рабочего аккордеона по ссылке: смотреть демо

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?