Skip to content

Instantly share code, notes, and snippets.

@oomlaut
Created August 11, 2012 04:38
Show Gist options
  • Save oomlaut/3320965 to your computer and use it in GitHub Desktop.
Save oomlaut/3320965 to your computer and use it in GitHub Desktop.
Basic Tabbed Content UI Element
if (typeof jQuery != "undefined") {
(function($) {
$('.accordion dt').each(function() {
$(this).on('click', function(){
$(this).toggleClass('on').siblings('.on').removeClass('on').end()
.next('dd').slideToggle().siblings('dd').slideUp();
}).next('dd').hide();
});
})(jQuery);
}​
<dl class="accordion">
<dt>Accordion Heading 1</dt>
<dd>
<p>Some content</p></dd>
<dt>Accordion Heading 2</dt>
<dd>
<p>Some more content</p></dd>
<dt>Accordion Heading 3</dt>
<dd>
<p>Some final content</p></dd>
</dl>​
.accordion { border:1px solid #ccc; }
.accordion dt { padding:.5em; background-color:#dadada; cursor:pointer; }
.accordion dt:hover { color:#666; }
.accordion .on { background-color:#eaeaea; cursor:default; }
.accordion dt,
.accordion .on:hover { color:#111; }
.accordion dd { padding-left:.5em; padding-right:.5em; }
/* NOTE:
Do not apply top/bottom padding or margin to the accordion content,
as its affects to the box model will cause the animation to be choppy.
Instead, apply vertical spacing to the content elements.
*/
.accordion dd p { padding-top:.5em; padding-bottom:.5em; }
body{ padding:2em; } /* used only to pretty up the display panel */​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment