Zebra Accordion

a tiny, easily configurable, fully customizable, cross-browser jQuery accordion plugin


Download View on GitHub

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.



1. Setup


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 }
                    

2. Basic usage


JavaScript

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

3. Collapsing/expanding ALL tabs


JavaScript

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

4. One way of adding arrows as state indicators

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


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.

copyright © 2011 - stefan gabos