Создание аккордеона на чистом JavaScript и jQuery. Простой аккордеон

В новой записи мы с вами рассмотрим несколько вариантов простой реализации вкладок на нативном JavaScript и jQuery. Это простые аккордеоны которые вы можете стилизовать под ваш вкус.

Давайте вначале сделаем всё с использованием jQuery, а потом сравним с реализацией на JavaScript.

Стили у нас будут самые простые, для меня главное показать результат.

CSS

.accordeonWrapper {
    margin-bottom: 50px;
}
.elemAccordeon {
    margin: 10px 0;
}
.headingElem {
    display: block;
    width: 100%;
    padding: 10px;
    background: rgb(33, 154, 175);
    color: #fff;
}
.descElem {
    display: none;
    padding: 20px 10px;
    border-bottom: 1px solid #1e1e1e;
}
/*класс active мы будум добавлять для элементов на которые нажал пользователь*/
.descElem.active {
    display: block;
    overflow: initial;
}

HTML

/*для всех вариантов одинаковая вёрстка, меняется только дополнительный класс контейнера*/
<div class="accordeonWrapper type_1">
    <div class="elemAccordeon">
        <div class="headingElem">Первая вкладка</div>
        <div class="descElem">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione provident deserunt quibusdam, dignissimos nemo perspiciatis earum harum! Porro, illo saepe, sed iusto id tempore odio laborum sapiente iure repudiandae dicta!
        </div>
    </div>
    <div class="elemAccordeon">
        <div class="headingElem">Вторая вкладка</div>
        <div class="descElem">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione provident deserunt quibusdam, dignissimos nemo perspiciatis earum harum! Porro, illo saepe, sed iusto id tempore odio laborum sapiente iure repudiandae dicta!
        </div>
    </div>
    <div class="elemAccordeon">
        <div class="headingElem">Третья вкладка</div>
        <div class="descElem">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione provident deserunt quibusdam, dignissimos nemo perspiciatis earum harum! Porro, illo saepe, sed iusto id tempore odio laborum sapiente iure repudiandae dicta!
        </div>
    </div>
</div>

Вариант где можно открыть все вкладки одновременно

/*вешаем обработчик события нажатия на элемент*/
$('.type_1 .headingElem').on('click', function (){
    /*записываем в переменную блок с контентом*/
    let thisContentBlock = $(this).parent().find('.descElem');
    /*проверяем есть ли у блока с контентом класс active
      если есть то удаляем, если нет то добавляем */
    if(thisContentBlock.hasClass('active')) {
        thisContentBlock.removeClass('active')
    }
    else {
        thisContentBlock.addClass('active')
    }
})

Вариант можно одновременно открыть только одну вкладку

/*всё тоже самое что и в первом варианте, кроме...*/
$('.type_2 .headingElem').on('click', function (){
    /*удаляем класса active у всех активных элементов*/
    $('.type_2 .descElem.active').removeClass('active')

    let thisContentBlock = $(this).parent().find('.descElem');

    if(thisContentBlock.hasClass('active')) {
        thisContentBlock.removeClass('active')
    }
    else {
        thisContentBlock.addClass('active')
    }
})

Реализация первого варианта на чистом JavaScript

/*находим все нужные нам headingElem*/
let allElems = document.querySelectorAll('.type_3 .headingElem');
/*прогоняем из через цикл*/
allElems.forEach((elem)=>{
    /*вещаем на каждый элемент обработчик на событие click*/
    elem.addEventListener('click', function(){
        /*у нажатого элемента получаем родителя*/
        let parentElem = this.parentNode;
        /*находим элемент с контентом*/
        let contentBlock = parentElem.querySelector('.descElem')
        /*аналогичная проверка на наличие класса active*/
        if(contentBlock.classList.contains("active")) {
            contentBlock.classList.remove('active');
        }
        else {
            contentBlock.classList.add('active');
        }
    })
})

Реализация второго варианта на чистом JavaScript

/*всё тоже самое, кроме...*/
let allElems = document.querySelectorAll('.type_3 .headingElem');

allElems.forEach((elem)=>{
    elem.addEventListener('click', function(){
        /*находим все активные элементы*/
        let descActive = document.querySelectorAll('.type_3 .descElem.active');
        /*прогоняем через цикл и удаляем класс active*/
        descActive.forEach((elem)=>{
            elem.classList.remove('active');
        })

        let parentElem = this.parentNode;

        let contentBlock = parentElem.querySelector('.descElem')

        if(contentBlock.classList.contains("active")) {
            contentBlock.classList.remove('active');
        }
        else {
            contentBlock.classList.add('active');
        }
    })
})