Basic jQuery Accordion

by ashleycam3ron

HTML

<h4>
  Title
</h4>
<div>
  Description
</div>
<h4>
  Title
</h4>
<div>
  Description
</div>
<h4>
  Title
</h4>
<div>
  Description
</div>

CSS

h4 {
  cursor: pointer;
  line-height:1.5;
  margin:0;
}

div {
  display: none;
  padding:15px 5px;
}

div.active {
  display: block;
}

JavaScript

jQuery("h4").click(function() {
  jQuery(this).next("div").slideToggle(500).toggleClass("active");
});