Designed accordion menu using js but want to do only open one accordion tab at one time

Question

I am designed accordion menu using js but want to do only open one accordion tab at one time. Please suggest any modifications required. I have tried lot but I did not get it if any one has idea about that please suggest.

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.maxHeight){
    	
  	  panel.style.maxHeight = null;
    } else {
  	  panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    height:45px;
    border: solid 2px;
    border-color: #E5E7E9;
    text-align: left;
    padding:0 16px ;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border-radius:10px;
    margin: 4px;
    
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel1 {
    padding: 0 20px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius:5px;
}

<div class="container" style="position:relative; margin-top:70px;margin-bottom:70px;" >
<div class="well" style="border-radius:8px;box-shadow:0 0 7px #999 background-color: #fafafa;">

<h2>Our Services</h2>

<button class="accordion"><span class="glyphicon glyphicon-phone"   ></span>  Mobile Recharge</button>
<div class="panel1">
  <p>
 <div class="scroll_table" id="style-2">
  <table class="table" >
    <tbody>
           <tr><td>BSNL</td></tr>
           <tr><td>Idea</td></tr>
           <tr><td>Vodaphone</td></tr>
            <tr><td>Reliance</td></tr>
    </tbody>
  </table>
 </div> 
 </p>
</div>

<button class="accordion"><span class="glyphicon glyphicon-earphone" ></span>   Postpaid Bills</button>
<div class="panel1">
  <p><div class="scroll_table" id="style-2">
  <table class="table" >
    <tbody>
           <tr><td>BSNL</td></tr>
           <tr><td>Idea</td></tr>
           <tr><td>Vodaphone</td></tr>
            <tr><td>Reliance</td></tr>
    </tbody>
  </table>
 </div> 
 </p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-phone-alt" ></span>    Landline Bills</button>
<div class="panel1">
  <p><div class="scroll_table" id="style-2">
  <table class="table" >
    <tbody>
           <tr><td>Airtel Landline and Broadband</td></tr>
           <tr><td>BSNL Landline and Broadband</td></tr>
           <tr><td>MTNL Delhi</td></tr>
            
    </tbody>
  </table>
 </div> 
 
  </p>
</div>



<button class="accordion"><span class="glyphicon glyphicon-list" ></span>       Dth</button>
<div class="panel1">
  <p>
  <div class="scroll_table" id="style-2">
  <table class="table" >
    <tbody>
           <tr><td>Tata Sky</td></tr>
           <tr><td>Dish TV</td></tr>
           <tr><td>Sun Direct</td></tr>
            <tr><td>Reliance Digital</td></tr>
            
    </tbody>
  </table>
 </div> 
 
  </p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-credit-card" ></span>  Datacard</button>
<div class="panel1">
  <p>
  <div class="scroll_table" id="style-2">
  <table class="table" >
    <tbody>
           <tr><td>Active</td></tr>
           <tr><td>Active</td></tr>
           <tr><td>Active</td></tr>
            <tr><td>Active</td></tr>
    </tbody>
  </table>
 </div> 
 
  </p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-flash" ></span>  Electricity</button>
<div class="panel1">
  <p>
  <div class="scroll_table" id="style-2">
  <table class="table" >
    <tbody>
           <tr><td>Marashtra Electricity Board</td></tr>
           <tr><td>BSES Rajbhani Power-DELHI</td></tr>
           <tr><td>BSES Yamuna Power-DELHI</td></tr>
            <tr><td>MSEB Mumbai</td></tr>
    </tbody>
  </table>
 </div> 
  </p>
</div>
<button class="accordion"><span class="glyphicon glyphicon-fire" ></span>  Gas Bill</button>
<div class="panel1">
  <p>
  <div class="scroll_table" id="style-2">
  <table class="table" >
    <tbody>
           <tr><td>Mahanagar Gas</td></tr>
           <tr><td>Active</td></tr>
    </tbody>
  </table>
 </div> 
 
  </p>
</div>

<button class="accordion"><span class="glyphicon glyphicon-tint" ></span>  Water Bill</button>
<div class="panel1">
  <p>
  <div class="scroll_table" id="style-2">
  <table class="table" >
    <tbody>
           <tr><td>All Companies</td></tr>
           <tr><td>Active</td></tr>
    </tbody>
  </table>
 </div> 
 
  </p>
</div>
</div> 
 </div>

Answer 1

Element.classList.toggle doesn't work in internet explorer, but regardless, you won't be using it for what you want to do.

(ES5)

// reference array of elements with class "accordion"
var accArr = document.getElementsByClassName("accordion");
// add event listener to all "accordion" elements to call "clickHandler"
accArr.forEach(function(elem){
    elem.addEventListener('click', clickHandler)
})

function clickHandler(e){
    // if element has class "active" remove class
    if(e.classList.contains('active'){
        e.classList.remove('active')
    // else remove "active" from current "active" elements and add class "active" to the last clicked "accordion" element
    } else {
        removeActive();
        e.classList.add('active')
    }
}

function removeActive(){
    var activeElement = document.getElementsByClassName('accordion active')[0];
    activeElement.classList.remove('active');
}

Answer 2

document.getElementsByClassName can be used with multiple classes.

So, before opening an accordion, first look for one already open with document.getElementsByClassName("active accordion"). If it exists, use your existing logic to remove the active class and collapse the nextSibling. Then open the new accordion as normal.