Как скрыть блок при клике на «закрыть»?

Question

[malayamarisha]

Всем привет.
Необходимо:
1) при клике на иконку "Info" открывать блок с текстом, у которого есть иконка закрытия
2) в блоке с текстом, при клике на "Info close", нужно скрывать открывшийся блок.

<div data-ix="dropdown-animation-3" class="w-dropdown">
    <div class="dropdown-toggle w-dropdown-toggle payment-item__pay-installments--toggle">
        <span style="width: 20px; height: 20px;">Info</span> // при клике открывается блок с текстом
    </div>
    <div class="dropdown-list dropdown-list-4 w-dropdown-list payment-item__pay-installments__info">
        <a href="#" data-ix="icon-close" class="payment-item__pay-installments--close">
            <span style="width: 20px; height: 20px;">Info close</span> // закрыть блок с текстом
        </a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea minima necessitatibus quasi rerum vero? Ad eius facilis nostrum qui rem!</p>
    </div>
</div>

При клике на "Info" блоку

payment-item__pay-installments--toggle dropdown-toggle w-dropdown-toggle w--open

добавляется класс "w--open".
Этот же класс добавляется блоку

dropdown-list dropdown-list-4 w-dropdown-list payment-item__pay-installments__info w--open

С помощью js при клике на "Info close" убираю везде "w--open". Блок с текстом скрывается, но при повторном клике на "Info", блок с текстом не появляется. Появляется, если второй раз кликнуть на "Info" .
Подскажите, что делаю не так?

JS:

let payInstallmentsToggle = document.querySelector('.payment-item__pay-installments--toggle')
let payInstallments = document.querySelector('.payment-item__pay-installments__info')
let isClose = document.querySelector('[data-ix=icon-close]');
isClose.addEventListener("click", () => {
	payInstallmentsToggle.classList.toggle('w--open');
	payInstallments.classList.toggle('w--open');
})

Comments

[MrColdCoffee]

.classList.remove вместо toggle

[Сергей delphinpro]

Видимо механизм открытия дропдауна хранит свое состояние не опираясь на класс w--open.
Смотрите как он работает.

[malayamarisha]

MrColdCoffee, данный вариант не помогает

[malayamarisha]

Сергей delphinpro, спасибо, что навели на мысль )

Как оказалось, это связано с webflow
Помогло:

$('.dropdown-list a').on('click', function () {
	$(".w-dropdown").trigger("w-close");
});

Answer 1

[Alfieros]

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

https://codepen.io/pen/?editors=1111

let payInstallmentsToggle = document.querySelector('.payment-item__pay-installments--toggle')
let payInstallments = document.querySelector('.payment-item__pay-installments__info')
let isClose = document.querySelector('.payment-item__pay-installments--close');
payInstallmentsToggle.addEventListener("click", () => {
  payInstallmentsToggle.classList.add('w--open');
  payInstallments.classList.add('w--open');
});
isClose.addEventListener("click", () => {
  payInstallmentsToggle.classList.remove('w--open');
  payInstallments.classList.remove('w--open');
});