Skip to content

Instantly share code, notes, and snippets.

@johnny5th
Last active December 12, 2015 00:48
Show Gist options
  • Save johnny5th/4686056 to your computer and use it in GitHub Desktop.
Save johnny5th/4686056 to your computer and use it in GitHub Desktop.
Jquery for a simple accordion function for content
$('.accordion .item').addClass('closed').click(function(){
if($(this).hasClass('closed')) {
$(this).removeClass('closed').addClass('open').children('.content').show('fast');
$(this).parent().children().not($(this)).removeClass('open').addClass('closed').children('.content').hide('fast');
} else {
$(this).removeClass('open').addClass('closed').children('.content').hide('fast');
}
});
.accordion {
.item {
border-top: 1px solid #d1d3d4;
> a {
display: block;
background-color: rgb(246,246,246); // Old browsers
@include filter-gradient(#f6f6f6, #ebebec, vertical); // IE6-9
@include background-image(linear-gradient(top, rgba(246,246,246,1) 0%,rgba(235,235,236,1) 100%));
font-weight: 700;
font-size: 26/18*1em;
line-height: 32/26*1em;
padding: 37/26*1em;
color: #0073bf;
cursor: pointer;
&:hover {
color: #424242;
text-decoration: none;
}
}
.content {
display: none;
border-top: 1px solid #d1d3d4;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment