Как сделать выпадающий список при клике на кнопку в JavaScript?

Question

[Дима]

Я делаю сайт для практики, с помощью библиотеки bootstrap4. Взял оттуда пока только nav-bar и хочу реализовать сайд бар с меню. В меню 2 кнопки при клике на которые должно разворачиваться их содержимое, я дошел до того момента, что при клике на любую из кнопок, открывается содержимое только 1-вой кнопки, вне зависимости от того на какую кнопку я нажал, 1 или 2-ю. Подскажите пожалуйста как это реализовать.

Вот сам код:

Answer 1

[Glorious Cat]

Код javascript:

// Вешаем обработчик событий на каждый элемент списка (в нашем случае ссылки)
document.querySelectorAll('.sideBtn > a').forEach(btn => {
    // Вешаем обработчик событий по клику
    btn.addEventListener('click', function(e) {
        // this это текущая кнопка, где с помощью метода nextElementSibling 
        // выбираем соседний элемент и добавляем в него css класс '.show'
        this.nextElementSibling.classList.toggle('show');
    });
});

В стили дописываем класс.

.show {
    display: inline-block;
}

Почитать:
document.querySelectorAll()
.nextElementSibling
Цикл по dom-элементам (англ.)
Добавление/удаление css-класса

Comments

[Sergey]

Только еще e.preventDefault(); надо бы

[Glorious Cat]

Firsov36, тоже верно. :)