Skip to content

Instantly share code, notes, and snippets.

@petertwise
Created April 4, 2016 00:35
Show Gist options
  • Save petertwise/8e414b89c62c555af49a128b974a31b1 to your computer and use it in GitHub Desktop.
Save petertwise/8e414b89c62c555af49a128b974a31b1 to your computer and use it in GitHub Desktop.
Square Candy jQuery Accordion
jQuery(document).ready(function($){
// accordion
$('.accordion_content').hide();
$('.accordion_item header h2').on('click', function(){
var accordionheader = $(this);
if (accordionheader.hasClass('accordion-open')) {
$('.accordion-open').removeClass('accordion-open');
accordionheader.parent().next().slideUp(500);
}
else {
var openoffset = accordionheader.parent().parent().prevAll().has('.accordion-open').find('.accordion_content').outerHeight();
var destination = accordionheader.offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-40-openoffset}, 500);
$('.accordion-open').not(accordionheader).removeClass('accordion-open');
accordionheader.addClass('accordion-open').parent().next().slideDown(500);
$('.accordion_content').not(accordionheader.parent().next()).slideUp(500);
}
return false;
});
});
.accordion_section {
clear: both;
}
.accordion_item header h2 {
cursor: pointer;
border-top: 1px solid #ccc;
padding:20px 0;
margin: 0;
}
.accordion_content {
overflow: hidden;
}
<section class="accordion_section">
<article class="accordion_item">
<header>
<h2>My Title 1</h2>
</header>
<div class="accordion_content">
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
</div>
</article>
<article class="accordion_item">
<header>
<h2>My Title 2</h2>
</header>
<div class="accordion_content">
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
</div>
</article>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment