Accordian in JS

by Santosh Thakur

HTML

<div>
  <span class="accordion">Heading 1</span>
  <p>Paragraph - this is my text</p>
</div>
<div>
  <span class="accordion">Heading 1</span>
  <p>Paragraph - this is my text</p>
</div>
<div>
  <span class="accordion">Heading 1</span>
  <p>Paragraph - this is my text</p>
</div>

CSS

.active{border:1px solid red}
.show{border:1px solid green; display:block;}
p{ position: absolute; top:10px; display:none; z-index: 1;}
div {
  border: 1px solid grey;
  display:inline-block;
}

JavaScript

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

for (i = 0; i < acc.length; i++) {
console.log(acc[i]);
    acc[i].onclick = function(){
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }
}