@dvakarandasha

Как можно улучшить функцию добавления класса?

У меня есть список табов, по клику на заголовок любой из табов должен добавляться класс 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>
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы