當另一個打開時，我該如何讓手風琴摺疊？

我希望其他手風琴在打開時關閉。我試着用bootstrap使用數據切換，但它沒有幫助。這裏是我的完整源代碼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>

正如我所說的數據切換沒有工作。請告訴我，如果我做錯了什麼。你可以嘗試在我的git集線器中編輯它，並告訴我它是否工作。

<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>

來源

2017-04-19 Agustin Zaurelli