jQuery Zebra Accordion Examples

The HTML:

                <!doctype html>
                <html>
                    <head>
                        <meta charset="utf-8">
                        <title>Zebra_Accordion Demo</title>
                        <link rel="stylesheet" href="path/to/zebra_accordion.css" type="text/css">
                        <script type="text/javascript" src="path/to/jquery-1.6.2.js"></script>
                        <script type="text/javascript" src="path/to/zebra_accordion.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>

The CSS:

            dl.Zebra_Accordion { width: 400px; font-family: Arial, sans-serif; font-size: 12px }
            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 }

1. 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.

2. All tabs can be expanded/collapsed

            $(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.