Multi Accordion

A accordion with multiple buttons ans a dynamically generated ID

HTML

<div class="container">

    <div class="row">

      <div class="three columns">
        <button class="accordion">Section 0</button>
      </div>  

      <div class="three columns">
        <button class="accordion">Section 1</button>
      </div>  
      
      <div class="three columns">
        <button class="accordion">Section 2</button>
      </div>    
      
      <div class="three columns">
        <button class="accordion">Section 3</button>
      </div>  
    
    </div>  
      
    <div class="row">
      <div class="twelve columns">
        <div class="panel">
          <p>Lorem ipsum 0...</p>
        </div>
      </div>
      <div class="twelve columns">
        <div class="panel">
          <p>Lorem ipsum 1...</p>
        </div>
      </div>
      <div class="twelve columns">
        <div class="panel">
          <p>Lorem ipsum 2...</p>
        </div>
      </div>
      <div class="twelve columns">
        <div class="panel">
          <p>Lorem ipsum 3...</p>
        </div>
      </div>
    </div>

  </div> <!-- /container  -->

CSS

.democlass{
  color: red;
}

#demo-0{
  color: red;
}

#demo-1{
  color: blue;
}

#demo-2{
  color: green;
}

#demo-3{
  color: magenta;
}

/* Accordion
–––––––––––––––––––––––––––––––––––––––––––––––––– 
https://www.w3schools.com/howto/howto_js_accordion.asp
*/

/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: white;
/*    display: none;
*/    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.container {
  position: relative;
  width: 100%;
  /*max-width: 1200px;*/
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 95%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns              ...

JavaScript

var acc = document.getElementsByClassName("accordion");

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");

    var writeID = document.getElementsByClassName("panel");
    for (var y = 0; y < writeID.length; y++) {
    var newID = "demo-"+y;
    writeID[y].setAttribute("id", newID);

    var panel = document.getElementById(newID);

    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
    }
  }
}