CODEWITHSUNDEEP
javascripthtml
Ruan
Ruan

Reputation: 17

Collapse one at the time on different divs

const buttons = document.querySelectorAll('.collaps');
const colls = document.querySelectorAll('.collaps_content');

buttons.forEach((thisButton, index) => {
    thisButton.addEventListener('click', () => {
        colls[index].style.display !== 'none'
        ? colls[index].style.display = 'none'
        : colls[index].style.display = 'block';
    });
});

Html

<div class="container-content">
    <div class="buttons">
        <button class="collaps">Btn1</button>
        <button class="collaps">Btn2</button>
        <button class="collaps">Btn3</button>
        <button class="collaps">Btn4</button>
    </div>


    <div class="collaps_content" style="display: none;">
        Btn1
    </div>

    <div class="collaps_content" style="display: none;">
        Btn2
    </div>

    <div class="collaps_content" style="display: none;">
        Btn3
    </div>

    <div class="collaps_content" style="display: none;">
        Btn4
    </div>
</div>

Is working fine, but I only want one collaps_content open at a time, that part is not working.

When I click on every button they are all open and I don't want that to happen.

I tried to look for solutions but so far none worked.

Upvotes: 0

Views: 119

Answers (1)

Anton Thomas
Anton Thomas

Reputation: 350

If I understood correctly, you want to close any other open collapsible divs when clicking a button. You can do this by first closing all collapsible divs, and then open the correct one like this:

const buttons = document.querySelectorAll('.collaps');
const colls = document.querySelectorAll('.collaps_content');

buttons.forEach((thisButton, index) => {
    thisButton.addEventListener('click', () => {
        colls.forEach(b => b.style.display = 'none');
        colls[index].style.display !== 'none'
        ? colls[index].style.display = 'none'
        : colls[index].style.display = 'block';
    });
});

I just added the colls.forEach(b => b.style.display = 'none'); in your existing JS.

Upvotes: 1

Related Questions