Сразу определим селекторы элементов и класс, они нам дальше понадобятся:
const blockSelector = 'селектор блоков';
const buttonSelector = 'селектор кнопок';
const activeClass = 'класс, показывающий блок';
Класс надо переключать не у всех блоков сразу, а у того, который соответствует нажатой кнопке. Как определить, какой блок нужен? Можно просто по индексу. Нажали третью кнопку - нужен третий блок. Как узнать индекс кнопки? Например, он передаётся в коллбек метода forEach. Т.е., в список параметров внешнего forEach добавляем индекс, и вместо внутреннего forEach выполняем обращение к соответствующему элементу коллекции блоков:
const blocks = document.querySelectorAll(blockSelector);
const buttons = document.querySelectorAll(buttonSelector);
buttons.forEach((n, i) => {
n.addEventListener('click', () => {
blocks[i].classList.toggle(activeClass);
});
});
Кстати, создавать отдельные обработчики клика для каждой из кнопок не обязательно, можно сделать один общий. Как при этом получать индексы? - их можно прицепить прямо к кнопкам. Например, в виде data-атрибута:
const onClick = function({ currentTarget: { dataset: { index } } }) {
this[index].classList.toggle(activeClass);
}.bind(document.querySelectorAll(blockSelector));
document.querySelectorAll(buttonSelector).forEach((n, i) => {
n.dataset.index = i;
n.addEventListener('click', onClick);
});
Также есть вариант вычислять индекс при клике:
const blocks = document.querySelectorAll(blockSelector);
const buttons = document.querySelectorAll(buttonSelector);
buttons.forEach(n => n.addEventListener('click', onClick));
function onClick() {
const index = Array.prototype.indexOf.call(buttons, this);
blocks[index].classList.toggle(activeClass);
}
А вообще, если у каждой из пар кнопка-блок есть отдельный общий предок (
const containerSelector = '...';), то индексы не нужны. Достаточно от нажатой кнопки подняться до общего предка кнопки и блока, и найти внутри блок (а можно даже и не искать, если добавлять класс контейнеру; конечно, стили придётся в этом случае немного изменить, вместо
.блок.класс будет
.контейнер.класс .блок):
const toggleBlock = button => button
?.closest(containerSelector)
?.querySelector(blockSelector)
.classList
.toggle(activeClass);
// можно добавить обработчик клика каждой кнопке индивидуально
document.querySelectorAll(buttonSelector).forEach(function(n) {
n.addEventListener('click', this);
}, e => toggleBlock(e.currentTarget));
// или один раз на всю страницу
document.addEventListener('click', e => {
toggleBlock(e.target.closest(buttonSelector));
});
