Создание аккордеона на чистом 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>

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

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

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

Первая вкладка
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!
Вторая вкладка
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!
Третья вкладка
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!
/*всё тоже самое что и в первом варианте, кроме...*/
$('.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');
        }
    })
})
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime