<div class="tabs__header">
<a href="#dropdown1" class="tabs__head">расписание 1</a>
<a href="#dropdown2" class="tabs__head">расписание 2</a>
</div>
<div class="dropdown" id="dropdown1">
блок1
</div>
<div class="dropdown" id="dropdown2">
блок2
</div>const dropdown = document.querySelectorAll('.dropdown');
triggerParrent = document.querySelector('.tabs__header');
const hideDrop = () =>{
dropdown.forEach(item => {
item.classList.add('dn');
item.classList.remove('dt');
})
}
hideDrop();
triggerParrent.addEventListener('click', (e) => {
const target = e.target;
if (target && target.classList.contains('tabs__head')) {
console.log(target);
const clickedTab = target.getAttribute('href'),
dropDownBlock = document.querySelector(clickedTab);
console.log(dropDownBlock);
hideDrop();
dropDownBlock.classList.add('dt');
}
});
.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));
}