Created
January 9, 2015 03:18
-
-
Save juanbrujo/8fe846da5142572fef77 to your computer and use it in GitHub Desktop.
simpleAccordion: jQuery function for very simple accordions using <dl>/<dt>/<dd>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<dl class="accordion"> | |
<dt><a href="#">Pellentesque fermentum dolor.</a></dt> | |
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd> | |
<dt><a href="#">Donec nec justo eget felis facilisis fermentum.</a></dt> | |
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd> | |
<dt><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></dt> | |
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd> | |
</dl> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Simple jQuery Accordion | |
* http://codepen.io/thirdtiu/pen/uDyxr | |
* USE: | |
simpleAccordion( | |
container (element), | |
openFirst true : false | |
); | |
*/ | |
simpleAccordion = function(container,openFirst){ | |
var allPanels = $('.accordion > dd').hide(), | |
allTitles = $('.accordion > dt > a'), | |
openFirst; | |
if(openFirst) { | |
$(container + ' > dt:first-child').next().addClass('active').slideDown(); | |
} | |
$(container + ' > dt > a').click(function() { | |
$this = $(this); | |
$target = $this.parent().next(); | |
if($target.hasClass('active')){ | |
$target.removeClass('active').slideUp(); | |
$this.removeClass('active'); | |
}else{ | |
allPanels.removeClass('active').slideUp(); | |
allTitles.removeClass('active'); | |
$target.addClass('active').slideDown(); | |
$this.addClass('active'); | |
} | |
return false; | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment