siga
1/23/2017 - 11:32 AM

Another simple jQuery accordion. Responsive, very basic styles, should inherit a lot of Dynamik CSS. Edit to meet your needs.

Another simple jQuery accordion. Responsive, very basic styles, should inherit a lot of Dynamik CSS. Edit to meet your needs.

.accordion h3 {
  box-sizing: border-box;
  cursor:pointer;
  padding: 5px;
  margin:0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.accordioncontent { 
  display: none;
  color:inherit;
  box-sizing: border-box; 
}
.accordion h3:after {
  content: '\002B';
  color: #000;
  font-weight: bold;
  float: right;
  margin: 0 5px;
}
.accordion h3.active {
  background: #f5f5f5;
}
.accordion h3.active:after {
  content: "\2212";
}
<section class="accordion">
      <h3>Header 1</h3>
      <div class="accordioncontent"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></div>
      <h3>Header 2</h3>
      <div class="accordioncontent"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></div>
      <h3>Header 3</h3>
      <div class="accordioncontent"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></div>
</section>
// Shortest possible version if you want all the panels stay open until you click them again - no active class though

jQuery(document).ready(function($) {
$('.accordion h3').click(function() {
       $(this).next().slideToggle('slow');
  })
});
jQuery(document).ready(function($) {
   $(".accordion h3").click(function() {
     // For active header definition
     $('.accordion h3').removeClass('active');
     $(this).addClass('active');
     
     // Accordion actions
     if($(this).next("div").is(":visible")){
       $(this).next("div").slideUp(400);
       $(this).removeClass('active');
     } else {
       $(".accordion .accordioncontent").slideUp(400);
       $(this).next("div").slideToggle(400);
     }
  });
});