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

Question

[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.
Если кто-то поможет, буду крайне благодарен.

Comments

[Lord_Dantes]

jQuery юзаете?

[Dolerum]

slave, нет, онли нативный js.

[Andrey Suha]

Dolerum, а что именно с target не получилось?

[Dolerum]

Andrey Suha, клик нужно ловить на первом блоке или на их общем родителе, а удалять второй. С таргет получилось так, что удалить можно только тот, на котором произошел клик. Возможно, как-то еще хитро можно сделать через таргет, чтобы второй блок удалялся. Но тут же не сделаешь делегирование - а кроме делегирования я не знаю как еще можно сделать.

Answer 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');
        })
    })

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

Comments

[Dolerum]

Больше спасибо.

[VegasChickiChicki]

Dolerum,

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

Немного ошибся тут, тут поиск не по элементу(иначе поиск будет внутри block1), а по всему документу.

[Dolerum]

VegasChickiChicki, все нормально, я уже немного подредактировал под свои нужды - работает.