accordion

accordion

      <div id="accordion">
          <h2>Tab1</h2>
          <div class="tab1 active">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, nulla!</p>
          </div>
          <h2>Tab2</h2>
          <div class="tab2">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, corrupti!</p>
          </div>
          <h2>Tab3</h2>
          <div class="tab3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, nobis.</p>
          </div>
      </div>

accordion css

.tab1, .tab2, .tab3{
  display: none;
  margin: 0 auto;
  }
.active{
  display:block;
}

accordion js

(function(){
  var accordion = document.getElementById('accordion'),
      titles = accordion.getElementsByTagName('h2');

  for ( var i=0; i<titles.length; i++ ){
    titles[i].addEventListener('click', displayAccordion);
  }

  function displayAccordion() {
    content = this.nextSibling.nextSibling;
    console.log(content)

    if ( !content.classList.contains('active') ) {
      content.classList.add('active')
    } else {
      content.classList.remove('active')
    }
  }
})();