Знаю, что в сети полно примеров, но, простого варианта без излишеств я не увидел, и, изначально это был простой вариант вкл/выкл через onclick. Потом решил добавить класс к текущему элементу. А теперь - чтоб при открывании одного блока, закрывались все остальные. Сейчас это выглядит так:
.block {
display: none;
}
.block.active {
display: block;
}
a.active {
color: red;
}
<a href="javascript:void(0)" class="toggle-1" onclick="event.preventDefault(); document.getElementsByClassName('block b1')[0].classList.toggle('active'); document.getElementsByClassName('toggle-1')[0].classList.toggle('active');">One</a>
<a href="javascript:void(0)" class="toggle-2" onclick="event.preventDefault(); document.getElementsByClassName('block b2')[0].classList.toggle('active'); document.getElementsByClassName('toggle-2')[0].classList.toggle('active');">Two</a>
<a href="javascript:void(0)" class="toggle-3" onclick="event.preventDefault(); document.getElementsByClassName('block b3')[0].classList.toggle('active'); document.getElementsByClassName('toggle-3')[0].classList.toggle('active');">Three</a>
<div class="block b1">123</div>
<div class="block b2">456</div>
<div class="block b3">789</div>
Помогите это дело записать проще. Чтоб при нажатии на ссылку она получала класс .active
и такой же класс получал элемент на странице, например .block.b1, а при открывании 2й ссылки, очищались предыдущие классы у других элементов. По аналогии с табами.
Можно отдельным скриптом, если в inline будет слишком муторно.
Спасибо!