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;
}

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;
    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
}

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

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

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

jQuery(() => {

    // открываем вкладку по умолчанию
    $(".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.

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