.dropdown {
display: none;
}
.dropdown.show {
display: block;
}
const headerSelector = '.tabs__head';
const contentSelector = '.dropdown';
const activeClass = 'show';
// делегирование, назначаем обработчик клика один раз для всех хедеров;
// контент, соответствующий нажатому хедеру, находим через значение атрибута href
document.addEventListener('click', ({ target: t }) => {
const header = t.closest(headerSelector);
if (header) {
document.querySelectorAll(contentSelector).forEach(function(n, i) {
n.classList[n === this ? 'toggle' : 'remove'](activeClass);
}, document.querySelector(header.attributes.href.value));
}
});
// или, назначаем обработчик клика каждому хедеру индивидуально;
// контент, соответствующий нажатому хедеру, определяем по равенству индексов
const headers = document.querySelectorAll(headerSelector);
const contents = document.querySelectorAll(contentSelector);
headers.forEach(n => n.addEventListener('click', onClick));
function onClick() {
const index = Array.prototype.indexOf.call(headers, this);
contents.forEach((n, i) => n.classList[i === index ? 'toggle' : 'remove'](activeClass));
}
