JS Accordion

by Rajesh Dixit

HTML

<div class="main">Section 1</div>
<div class="panel active">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="main">Section 2</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="main">Section 3</div>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

CSS

.main {
  background-color: #eee;
  width: 350px;
  color: #444;
  padding: 18px;
  border: none;
  text-align: left;
  font-size: 15px;
}

.main.active,
.main:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  width: 350px;
}

.active {
  display: block !important;
}

div.panel.show {
  display: block;
}

div.panel.hide {
  display: none;
}

JavaScript

function registerEvents(){
	var sections = document.querySelectorAll(".main");
  for (var i=0; i<sections.length; i++){
  	sections[i].addEventListener("click", toggleSection)
  }
}

function toggleSection(e){
	var ele = e.target.nextElementSibling;
  var isNotVisible = ele.className.indexOf("active") <0;
	hideAllPanels();
  if(isNotVisible)
  	addClass(ele, "active");
}

function hideAllPanels(){
	var panels = document.querySelectorAll(".panel.active");
  for (var i=0; i<panels.length; i++){
  	panels[i].className = panels[i].className.replace("active", "");
  }
}

function addClass(el, _class){
	el.className += " " + _class;
}

(function init(){
	registerEvents();
})()