Accordion jQuery

Рассмотрим создание Accordion без использования плагинов. Для его реализации мы будет использовать jQuery и CSS.
Демонстрация

Структура:
.accordion - обёртка для аккордеона,
.accordion__item - вкладки аккордеона,
.accordion__title - заголовки,
.accordion__content - контент, который будет виден у активной вкладки.

<div class="accordion" id="accordion">

  <div class="accordion__item active__item">
    <div class="accordion__title">Tab name one</div>
    <div class="accordion__content">The content one</div>
  </div>

  <div class="accordion__item">
    <div class="accordion__title">Tab name two</div>
    <div class="accordion__content">The content two</div>
  </div>

  <div class="accordion__item">
    <div class="accordion__title">Tab name three</div>
    <div class="accordion__content">The content three</div>
  </div>

</div>

Первый accordion__item имеет класс active__item для того, чтобы по умолчанию первая вкладка была открыта, если в этом нет надобности, то этот класс можно просто удалить из HTML разметки.

Стили для аккордеона

Наш Accordion jQuery будет иметь следующие стили, которые вы легко можете изменить под себя.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: medium none;
  list-style: none
}
body {
  font-family: sans-serif;
}
.accordion {
  width:100%;
  max-width: 600px; 
  margin: 0 auto;
}
.accordion .accordion__item {
  margin-bottom: 1px;
  position: relative
}
/* заголовки панелей аккордеона */
.accordion .accordion__title {
  font-weight: 400;
  font-size: 18px;
  color: #ededed;
  cursor: pointer;
  background: #37474f;
  padding: 10px 55px 10px 15px;
  transition: all .2s linear 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none;
  user-select: none;
}
/* переключатель панелей, положение вниз */
.accordion .accordion__title::before {
  content: '';
  height: 8px;
  width: 8px;
  display: block;
  border: 2px solid #fefcfe;
  border-right-width: 0;
  border-top-width: 0;
  transform: rotate(-45deg);
  position: absolute;
  right: 20px;
  top: 18px
}
/* активный переключатель, положение вверх */
.accordion .active__item .accordion__title:before {
  border: 2px solid #fefcfe;
  border-left-width: 0;
  border-bottom-width: 0;
  top: 18px;
}
.accordion .accordion__title:hover {
  background: #455b64;
}
/* заголовок активного блока  */
.accordion .active_block .accordion__title {
  background: #455b64;
  color:#fefcfe
}
/* контент */
.accordion .accordion__content {
  display:none;
  padding:10px 15px;
  overflow: hidden;
  background:#f7f8f7
}

Немного пояснений:

  1. для .accordion мы задали max-width:600px и width:100% для того чтобы наш аккордеон смотрелся на всех разрешениях достойно;
  2. c помощью псевдоэлемента ::before мы создали переключатель в виде стрелки;
  3. при помощи удаления / добавления класса active__item мы будем поворачивать стрелку.

Теперь, самое важное и интересное, это jQuery

$(function() {

  // открываем вкладку по умолчанию

  $('.active__item .accordion__content').slideDown();

  $('#accordion .accordion__title').on('click', function(){
    $('#accordion .accordion__content').not( $(this).next() ).slideUp(299);

    $('.accordion__item').removeClass('active__item');
    $(this).next().slideDown(299).parent().addClass('active__item');
  });

});

До javascript-кода обязательно должен быть подключен jQuery

Демонстрация

Если вам понравилась данная статья, рекомендую к прочтению адаптивные вертикальные вкладки для сайта.

Изучаем английский
EnglishRussian
AccordionГармошка
OutlineКонтур, обводка
RotateВращать
Slide Up/DownСкользить вверх/вниз
ToggleПереключатель
admin
19/11/2019 10:53