См. Мои комментарии в обновленном примере ниже.
При нажатии мы удаляем ВСЕ активные классы на кнопках и в текстовых областях, а затем добавляем активный класс к тем, которые в нем нуждаются.
Преимущество здесь в том, что вы не храните активный класс в javascript.Таким образом, вы не рискуете получить представление и сохраненное состояние, чтобы выйти из синхронизации другими скриптами, которые могут быть запущены ..
// first we get all the buttons and text areas
var btns = document.querySelectorAll('.btn');
var mores = document.querySelectorAll('.more');
// we add an event listener by looping trough all the buttons
for (const btn of btns) {
btn.addEventListener('click', handleClick);
}
// handle the button click
function handleClick(event){
event.preventDefault();
// remove the active class on ALL the buttons
for (const btn of btns) {
btn.classList.remove('active');
}
// add the active class on the clicked button
event.target.classList.add('active');
//remove the active class on all the text areas
for (const more of mores) {
more.classList.remove('active');
}
// here we get the data-show attribute of the clicked element
// and use it to show the right text area
document.querySelector(`#${event.target.dataset.show}`).classList.add('active');
}
div.scrollmenu {
background-color: #006668;
overflow: auto;
white-space: nowrap;
}
.btn.active{
background: #000000;
}
.more{
display: none;
}
.more.active{
display: block;
}
<div class="scrollmenu">
<a class="btn" href="#" data-show="more1" >Event 1</a>
<a class="btn" href="#" data-show="more2">Event 2</a>
</div>
<span id="more1" class="more">Display Event Here 1.</span>
<span id="more2" class="more">Display Event Here 2.</span>