Друзья всем привет. Я изучаю JS и решил попробовать свои силы и написать функционал для работы аккордиона с нуля. Задачу поставил довольно простую: при клике по шапке аккордиона (item), должен показываться текстовый контент. При повторном клике он должен скрываться, а также он должен скрываться при клике по шапке другой ячейки. Для реализации этой задачи я написал следующий код:
HTML
<div class="block">
<div class="block__item">
<div class="block__title">Заголовок 1</div>
<div class="block__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam architecto magni tenetur, fugiat incidunt quae recusandae vel sunt enim! Velit dignissimos saepe consequuntur quaerat sit quia consequatur necessitatibus porro maxime.</div>
</div>
<div class="block__item">
<div class="block__title">Заголовок 2</div>
<div class="block__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam architecto magni tenetur, fugiat incidunt quae recusandae vel sunt enim! Velit dignissimos saepe consequuntur quaerat sit quia consequatur necessitatibus porro maxime.</div>
</div>
<div class="block__item">
<div class="block__title">Заголовок 3</div>
<div class="block__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam architecto magni tenetur, fugiat incidunt quae recusandae vel sunt enim! Velit dignissimos saepe consequuntur quaerat sit quia consequatur necessitatibus porro maxime.</div>
</div>
</div>
SASS
.block
&__title
position: relative
text-transform: uppercase
letter-spacing: 2px
padding-left: 30px
cursor: pointer
transition: 0.3s all
&::before
content: ''
width: 10px
height: 1px
background-color: black
position: absolute
top: 5px
transform: rotate(40deg)
left: 0
&::after
content: ''
width: 10px
height: 1px
background-color: black
position: absolute
top: 5px
transform: rotate(-40deg)
left: 7px
&__text
display: none
padding-top: 10px
&__item
margin-bottom: 20px
.block__title.active
&::before
background-color: red
transform: rotate(-40deg)
&::after
background-color: red
transform: rotate(40deg)
.block__text--active
display: block
JS
let accHeader = document.querySelectorAll('.block__item'),
accContent = document.querySelectorAll('.block__text');
accHeader.addEventListener('click', function(){
for(let i = 0; i < accHeader.length; i++){
if(accContent[i].classList.contains('.block__text--active')){
accContent[i].classList.remove('block__text--active');
accContent[i].classList.add('block__text--active');
} else{
accContent[i].classList.add('block__text--active');
}
}
});
А теперь немного о том, как по моему мнению должен был отработать данный код:
Логичнее всего в данном случае повесить обработчик событий на accHeader, так как в нем содержится и title и иконка и куда бы не нажал пользователь аккордион будет срабатывать.
block__item, который является значением переменной accHeader, на странице не один, а значит внутри обработчика событий нам нужен цикл, который переберет все такие элементы на странице. В параметрах цикла for мы указываем что переменная i < accHeader.length, тем самым давая коду возможность самостоятельно проверять количество таких элементов на странице.
Цикл написан и теперь надо добавить только класс active для accContent. Но перед этим нам нужно проверить нет ли там уже этого класса. Поэтому внутри цикла мы пишем условие if else. Если у accContent есть класс .block__text--active, мы его сначала удаляем, а потом добавляем снова, а если его нет, то просто его добавляем. Такое условие как раз и позволяет нам скрывать текс при повторном клике по шапке аккордиона и при клике по шапке следующей ячейки. Кроме того после accContent мы ставим [i], для того чтобы на каждой итерации цикла связать определенный item с определенным текстом.
А теперь уважаемые знатоки, внимание вопрос: Почему этот код не работает?
accHeader
- это не один элемент, а список элементов. Зачем эти стили:.block__title.active { ... }
? У вас всё равно нигде не выдаётся классactive
элементу..classList.toggle()
вместоremove()
иadd()
, тогда и проверки в цикле не нужно будет никакой