a tiny, easily configurable, fully customizable, cross-browser jQuery accordion plugin
Zebra Accordion is a tiny (3KB minified, ~1.3KB gzipped) jQuery accordion plugin. It transforms a basic definition list, without requiring any specific markup, into a small-footprint, easily configurable, fully customizable, cross-browser accordion widget, useful for better organizing larger groups of content.
A basic definition list is all that it is required. We add the Zebra_Accordion class just
because we have some minimal properties defined in the plugin's CSS file, that make sure that the
content is initially collapsed and that the content headers (the one that expand content) have the
cursor set to pointer. Obsiously, you don't have to include the plugin's CSS file, and
you can write your own using whatever class name and ID you see fit making sure to initialize the
plugin with it later on.
The plugin's CSS
.Zebra_Accordion dd {
display: none;
}
.Zebra_Accordion dt {
cursor: pointer;
}
The required HTML markup
<dl class="Zebra_Accordion">
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
<dd>
Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
</dd>
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
<dd>
Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
</dd>
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
<dd>
Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
</dd>
<dt>Lorem ipsum dolor sit amet consectetuer</dt>
<dd>
Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et.
Quis hendrerit neque congue pretium iaculis justo laoreet orci elit condimentum.
Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.
</dd>
</dl>
Since Zebra Accordion provides no styling for the definition list, it is up to you to set it up. For the purpose of this example this is the style we'll use:
dl.Zebra_Accordion { width: 100% }
/* the collapsed titles */
dl.Zebra_Accordion dt { background: #000; color: #FFF; font-weight: bold; padding: 5px }
/* the expanded titles */
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #C40000 }
/* the content */
dl.Zebra_Accordion dd { background: #EFEFEF; padding: 15px; margin: 1px 0 }
JavaScript
$(document).ready(function() {
var myAccordion = new $.Zebra_Accordion('.Zebra_Accordion');
});
Result
JavaScript
$(document).ready(function() {
var myAccordion = new $.Zebra_Accordion('.Zebra_Accordion', {
collapsible: true
});
});
Result
One way of doing this is to use Unicode characters and the before pseudo selector.
We will use right oriented arrow when tabs are not expanded, and arrows pointing down when the content
is expanded.
Note that for this way of doing it, we don't have to change the markup!
CSS
.Zebra_Accordion dt:before {
content: "▶";
margin-right: 10px;
}
.Zebra_Accordion dt.Zebra_Accordion_Expanded:before {
content: "▼";
margin-right: 10px;
}
JavaScript
$(document).ready(function() {
var myAccordion = new $.Zebra_Accordion('.Zebra_Accordion');
});
Result
copyright © 2011 - stefan gabos