Simple Accordion

by Ketan Patel

HTML

<div>
  <h3 class="acc-toggler">Accordion 1</h3>
  <div class="acc-content">Text Content 1</div>
  <h3 class="acc-toggler">Accordion 2</h3>
  <div class="acc-content">Text Content 2</div>
  <h3 class="acc-toggler">Accordion 3</h3>
  <div class="acc-content">Text Content 3</div>
</div>

CSS

body,* { margin:0; padding:0; }
body { line-height:1; }

.acc-toggler { padding:10px 12px; border-bottom:1px solid #ccc; background:#ddd; cursor:pointer; }
.acc-content { padding:10px 12px; background:#eee; }

JavaScript

$(".acc-content").hide();
$(".acc-toggler").on("click",function(e){
	var accContent = $(this).next(".acc-content");
  
	$(".acc-content").not(accContent).slideUp();
	accContent.slideToggle();
});