Skip to content

Instantly share code, notes, and snippets.

@SiGaCode
Last active January 23, 2017 12:00
Show Gist options
  • Save SiGaCode/817bec7a643b5acbf1c4f9fce014044e to your computer and use it in GitHub Desktop.
Save SiGaCode/817bec7a643b5acbf1c4f9fce014044e to your computer and use it in GitHub Desktop.
Another simple jQuery accordion. Responsive, very basic styles, should inherit a lot of Dynamik CSS. Edit to meet your needs.
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);
}
});
});
// 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');
})
});
<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>
.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";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment