@Dolerum

Как сделать аккордеон, с одинаковыми классами, чтобы по клику открывалась только одна секция?

Здравствуйте. Не получается сделать аккордеон. По клику на block1, или на общего родителя accordeon, block2 должен скрываться.
Но есть важное условие, очень ограничивающее. Нельзя менять классы, делать какие-то отдельные классы. Только такая структура;
<div class="accordeon">
<div class="block1">контент</div>
<div class="block2">контент</div>
</div>
<div class="accordeon">
<div class="block1">контент</div>
<div class="block2">контент</div>
</div>
<div class="accordeon">
<div class="block1">контент</div>
<div class="block2">контент</div>
</div>
<div class="accordeon">
<div class="block1">контент</div>
<div class="block2">контент</div>
</div>
<div class="accordeon">
<div class="block1">контент</div>
<div class="block2">контент</div>
</div>

У всех 4 аккордеонов одинаковые классы, и непонятно, как сделать эдакий this, чтобы ловить клик на одном классе и закрывать тоже один класс, а не чтобы по клику на один аккордеон сразу все 5 аккордеонов открывались/закрывались. Пробывал с target, currentTarget - не получается, мне нужен не event.
Если кто-то поможет, буду крайне благодарен.
  • Вопрос задан
  • 206 просмотров
Решения вопроса 1
@VegasChickiChicki
Так работайте через поиска элемента и айди, так же используйте перебор через forEach.
document.querySelectorAll('.accordeon').forEach(function (el) {
        el.addEventListener('click',function () {
            el.querySelector('.block1').classList.remove('active');
            el.querySelector('.block2').classList.remove('active');
        })
    });

    document.querySelectorAll('.block1').forEach(function (el,id) {
        el.addEventListener('click',function () {
            el.querySelectorAll('.block2')[id].classList.remove('active');
        })
    })

Что вроде того можно сделать, примеры не лучшие, но логика такая.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы