Accordian

Accordian

by Santosh Thakur

HTML

<div class="accordionWrapper">

  <div class="accordionItemHeading">111</div>
  <div class="accordionItemContent closeXx">
    <p>JavaScript accordions 11111111111</p>
  </div>

  <div class="accordionItemHeading">222</div>
  <div class="accordionItemContent closeXx">
    <p>A JavaScript accordion 222222222</p>
  </div>

  <div class="accordionItemHeading">333</div>
  <div class="accordionItemContent closeXx">
    <p>Click an accordion item's 3333333333</p>
  </div>

</div>

CSS

.openXx {
  display: block;
  transform: scaleY(1);
  transition: transform 0.4s ease;
}

.closeXx {
  display: none;
  transform: scaleY(0);
  transition: transform 0.4s ease;
}

JavaScript

var accItem = document.getElementsByClassName('accordionItemContent');
  var accHD = document.getElementsByClassName('accordionItemHeading');


  for (i = 0; i < accHD.length; i++) {
    accHD[i].addEventListener('click', toggleItem, false);
  }

  function toggleItem() {
    var itemClass = this.nextElementSibling.className;

    console.log(itemClass);
    for (i = 0; i < accItem.length; i++) {

      accItem[i].className = 'accordionItemContent closeXx';
    }

    if (itemClass == 'accordionItemContent closeXx') {
      this.nextElementSibling.className = 'accordionItemContent openXx';
    }
  }