Добавить и убрать стиль у блока по клику

Question

Как сделать следующее (на чистом js) по нажатию на footer-btn добавить ему класс footer-open (а при повторном нажатии убрать класс). При этом, скрывать или показывать блок ul который находится ниже с классом footer-list. Т.е. для каждого блока должен скрываться или показываться только свой ul

for(var i = 0; i < document.getElementsByClassName('footer-btn').length; i++) {
            document.getElementsByClassName('footer-btn')[i].addEventListener("click", function(){
                this.classList.toggle("footer-open");
                if (this.classList.contains('footer-open')) {
                    document.querySelector('.footer-list').style.display = "none";
                }else{
                    document.querySelector('.footer-list').style.display = "block";
                }

            })
        }

<div class="footer">
<div class="footer-btn">Кнопка1</div>
<ul class="footer-list">
<li>text</li>
</ul>
</div>

<div class="footer">
<div class="footer-btn">Кнопка2</div>
<ul class="footer-list">
<li>text2</li>
</ul>
</div>

<div class="footer">
<div class="footer-btn">Кнопка3</div>
<ul class="footer-list">
<li>text3</li>
</ul>
</div>

Answer 1

for (let i = 0; i < document.getElementsByClassName('footer-btn').length; i++) {
    document.getElementsByClassName('footer-btn')[i].addEventListener("click", function() {
        this.classList.toggle("footer-open");
        let footerList = this.closest('.footer').querySelector('.footer-list');

        this.classList.contains('footer-open') 
          ? footerList.style.display = "none"
          : footerList.style.display = "block";                
    })
}

<div class="footer">
<div class="footer-btn">Кнопка1</div>
<ul class="footer-list">
<li>text</li>
</ul>
</div>

<div class="footer">
<div class="footer-btn">Кнопка2</div>
<ul class="footer-list">
<li>text2</li>
</ul>
</div>

<div class="footer">
<div class="footer-btn">Кнопка3</div>
<ul class="footer-list">
<li>text3</li>
</ul>
</div>

БЛОГ НА HUSL

Добавить и убрать стиль у блока по клику

Ответы (1 шт):