当另一个手风琴打开时，如何让手风琴折叠？

Question

I want other accordions to close when one is open. I tried using data-toggles with bootstrap but it didnt help. Here is my complete source code on Github .

<button class="accordion">Bedroom & Living Room</button>
                <div class="panel">
                    <p>Wipe down tables and chairs.<br>
                    Removing dirt from carpets using high-powered vacuums.<br>
                    Removing garbage and debris.</p>
                </div> <br>
                <button class="accordion">Bathroom & Kitchen</button>
                <div class="panel">
                    <p>Wash Dishes<br>
                    Clean counters<br>
                    Stove</p>
                </div> <br>
                <button class="accordion">Extra Services</button>
                <div class="panel">
                    <p>Polished furniture.<br>
                    Dusting window sills and desk.<br>
                    Proper removal of dust and careful treatment to blinds and mini blinds.</p>
                </div> 



<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}
</script>

As i said Data-toggles didnt work. Please tell me if I am doing anthing wrong. You can try to edit it in my git hub and tell me if it works.

<div id="accordion">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><button class="accordion">Bedroom & Living Room</button></a>
            <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel">
                <p>Wipe down tables and chairs.<br>
                Removing dirt from carpets using high-powered vacuums.<br>
                Removing garbage and debris.</p>
            </div>
            </div>
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><button class="accordion">Bathroom & Kitchen</button></a>
            <div id="collapse2" class="panel-collapse collapse in">
            <div class="panel">
                <p>Wash Dishes<br>
                Clean counters<br>
                Stove</p>
            </div>
            </div>
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><button class="accordion">Extra Services</button></a>
            <div id="collapse3" class="panel-collapse collapse in">
            <div class="panel">
                <p>Polished furniture.<br>
                Dusting window sills and desk.<br>
                Proper removal of dust and careful treatment to blinds and mini blinds.</p>
            </div>
            </div>  
            </div>

Answer 1

Since you're using bootstrap you may want to look at using their accordion:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h

It does exactly what you want to do.