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

我希望其他手风琴在打开时关闭。我试着用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