Fork me on GitHub

Zebra_Accordion is a tiny (3KB minified, ~1.3KB gzipped) accordion plugin for jQuery. 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.

Setup

HTML
                        <!doctype html>
                        <html>
                            <head>
                                <meta charset="utf-8">
                                <title>Zebra_Accordion Demo</title>
                                <link rel="stylesheet" href="path/to/zebra_accordion.min.css" type="text/css">
                                <script type="text/javascript" src="path/to/jquery.js"></script>
                                <script type="text/javascript" src="path/to/zebra_accordion.min.js"></script>
                            </head>
                            <body>
                                <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>
                            </body>
                        </html>
                    
CSS
                    dl.Zebra_Accordion { width: 100% }
                    dl.Zebra_Accordion dt { background: #000; color: #FFF; font-weight: bold; padding: 5px }
                    dl.Zebra_Accordion dd { background: #EFEFEF; padding: 15px; margin: 1px 0 }

                    dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #C40000 }
                    

Basic usage

                    $(document).ready(function() {
                        var myAccordion = new $.Zebra_Accordion('.Zebra_Accordion');
                    });
                    
Result

Lorem ipsum dolor sit amet consectetuer
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.
Lorem ipsum dolor sit amet consectetuer
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.
Lorem ipsum dolor sit amet consectetuer
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.
Lorem ipsum dolor sit amet consectetuer
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.

Collapsing/expanding ALL tabs

                    $(document).ready(function() {
                        var myAccordion = new $.Zebra_Accordion('.Zebra_Accordion', {
                            collapsible: true
                        });
                    });
                    
Result

Lorem ipsum dolor sit amet consectetuer
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.
Lorem ipsum dolor sit amet consectetuer
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.
Lorem ipsum dolor sit amet consectetuer
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.
Lorem ipsum dolor sit amet consectetuer
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.