У меня есть список табов, по клику на заголовок любой из табов должен добавляться класс active к тайтлу, и к содержимому этого таба.
Мой код работает, всё ок, но хотелось бы узнать лучшую практику, как это стоило бы сделать.
<div class="tabs">
<div class="step_group">
<div class="step_list title">Title Tab 1</div>
<div class="step_options">Content Tab 1</div>
</div>
<div class="step_group">
<div class="step_list title">Title Tab 2</div>
<div class="step_options">Content Tab 2</div>
</div>
<div class="step_group">
<div class="step_list title">Title Tab 3</div>
<div class="step_options">Content Tab 3</div>
</div>
</div>
<script>
const stepGroup = document.querySelectorAll('.step_group');
stepGroup.forEach(element => {
const stepTitleElement = element.querySelector('.step_list .title');
const attrDescriptionSpoilerElement = element.querySelector('.step_options');
stepTitleElement.addEventListener('click', () => {
stepTitleElement.classList.toggle('active');
attrDescriptionSpoilerElement.classList.toggle('active');
})
})
</script>