collaps button

by Ascalon

HTML

These <button class="col">btn1</button> and <button class="col">btn2</button> are two buttons.
<div class="con ">div1</div>
<div class="con ">div2</div>
They can be placed in the same line, and both their contents can be shown at the same time.

CSS

.col { /* collapsible */
  outline: none;
  padding: 1px;
  font-size: 1em;
}
.con { /* content */
  padding: 0 1em;
  max-height: 0;
  overflow: hidden;
  background-color: red;
}

JavaScript

( function() {
  coll = document.getElementsByClassName("col");
  conn = document.getElementsByClassName("con");
  var i;
  for (i = 0; i < coll.length; i++) {
    coll[i].setAttribute('data-id', 'con' + i);
    conn[i].setAttribute('id', 'con' + i);
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = document.getElementById(this.getAttribute('data-id'));
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  }
} )();