Zebra_Accordion, a tiny accordion jQuery plugin

Get the latest updates on this jQuery plugin via RSS

Zebra_Accordion is a tiny (3KB minified) accordion jQuery plugin. It transforms a basic definition list, without requiring any other specific markup, into a small-footprint, easily configurable, fully customizable, cross-browser accordion widget, useful for better organizing larger groups of content.

Features:

  • no additional markup required other than a basic definition list;
  • appearance is easily customizable through CSS;
  • works with both fixed and fluid (responsive) layouts;
  • can be configured so that only a single tab can be expanded at a time, or so that all tabs may be expanded/collapsed;
  • can be configured so that tabs expand on mouse over;
  • when, after expanding a tab, part of its content is outside the viewport, it automatically scrolls the browser’s window so that the tab’s content is visible;
  • callback functions can be used for further customizations;
  • works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)

Top

Requirements

Zebra_Accordion has no dependencies other than jQuery.

I’ve only tested with jQuery 1.5.2 but it may work in earlier versions, too. If you can test, please let me know. Thanks!

Top

How to use

First, load the latest version of jQuery either from a local source or from a CDN.

Load the Zebra_Accordion plugin

<script type="text/javascript" src="path/to/zebra_accordion.js"></script>

Load the plugin’s CSS file

<link rel="stylesheet" href="path/to/zebra_accordion.css" type="text/css">

Now, within the DOM-ready event do

$(document).ready(function() {

  new $.Zebra_Accordion($('.Zebra_Accordion'));

});

Demos

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

Top

Configuration

All parameters are optional.

animate_opacity boolean

Should the content block’s opacity be also animated? 

Default is TRUE

collapsible boolean

If set to TRUE, an open block can also be collapsed – in this case, all blocks can be collapsed; if set to FALSE, an open block can be collapsed only by opening another block – in this case, only a single block is open at any given moment; 

Default is FALSE

expanded_class string

The name of the class to append to the “title” element when its associated content block is expanded. 

Can be used for customizing the aspect of the opened tab to give better visual feedback to the users.

Default is “Zebra_Accordion_Expanded”

hide_speed integer

The speed (in milliseconds) to use when collapsing content blocks. 

Default is 400

scroll_speed integer

If a content block’s content is not entirely visible after it is expanded, the window will be scrolled so so that the entire content of the content block is visible (if is possible). 

This value represents the speed (in milliseconds) to use for scrolling.

Default is 600

show_speed integer

The speed (in milliseconds) to use when expanding content blocks. 

Default is 400

show mixed

The index (0 based) of the content block to be expanded by default. 

The value of this property can also be boolean FALSE, indicating that all tabs should be collapsed by default.

If the value of the “collapsible” property is TRUE, the value of this property can also be boolean TRUE, indicating that all tabs should be expanded by default, or an array with the indexes of tabs to be expanded by default.

Default is 0

toggle_on_mouseover boolean

Set this to TRUE if content blocks should be expanded when hovering their associated “titles”. 

If “collapsible” is TRUE then this property will always be FALSE!

Default is FALSE.

Events

onBeforeClose  

Event fired before a content block is collapsed. 

The callback function (if any) receives as arguments the closed item’s number (0 based), the title element and the content block element.

onBeforeOpen  

Event fired before a content block is expanded. 

The callback function (if any) receives as arguments the closed item’s number (0 based), the title element and the content block element.

onClose  

Event fired after a content block is collapsed. 

The callback function (if any) receives as arguments the closed item’s number (0 based), the title element and the content block element.

onOpen  

Event fired after a content block is expanded. 

The callback function (if any) receives as arguments the opened item’s number (0 based), the title element and the content block element.

Public methods

show  

Expands a content block. 

show(index, [noFx = FALSE], [noScroll = FALSE])

where

index: the 0-based index of the content block to expand

noFx: (optional) if set to TRUE, the content block will be instantly expanded without animation; default is FALSE.

noScroll: (optional) if set to TRUE, the browser window will not be scrolled to the newly expanded content block; default is FALSE.

var myAccordion = new $.Zebra_Accordion($('myList'));
myAccordion.show(0);
hide  

Collapses a content block. 

hide(index, [noFx = FALSE])

where

index: the 0-based index of the content block to collapse

noFx: (optional) if set to TRUE, the content block will be instantly collapsed without animation; default is FALSE.

var myAccordion = new $.Zebra_Accordion($('myList'));
myAccordion.hide(0);

Top 

Download

version 1.2.2
If you find this library to be useful to you, you can support the author by donating a small amount via PayPal:

Zebra_Accordion is distributed under the LGPL.

In plain English, this means that you have the right to view and to modify the source code of this software, but if you modify and distribute it, you are required to license your copy under a LGPL-compatible license, and to make the entire source code of your derivation available to anybody you distribute the software to.

You also have the right to use this software together with software that has different licensing terms (including, but not limited to, commercial and closed-source software), and distribute the combined software, as long as state that your software contains portions licensed under the LGPL license, and provide information about where the LGPL licensed software can be downloaded.

If you distribute copies of this software you may not change the copyright or license of this software.


You may also like:

Top

Changelog

Click on a version to expand/collapse information.

version 1.2.2 (November 28, 2013)
  • added 2 new events – onBeforeClose and onBeforeOpen; thanks to paul for suggesting this a while ago;
  • minor updates to keep JSHint happy
version 1.2 (March 24, 2013)
  • if the “collapsible” property is set to TRUE, the “show” property can now also be an array of values representing tabs to be expanded by default, or boolean TRUE indicating that all tabs should be expanded by default;
  • fixed a bug where when resizing the browser window, all tabs would be collapsed, except for the first one;
  • better error handling for the “show” and “hide” methods;
  • fixed some small issues in the code;
  • the plugin is now available on GitHub!
version 1.1 (November 20, 2011)
  • the plugin now also works with fluid (responsive) layouts; previously, if the browser window was re-sized, the plugin did not resize accordingly (in the case where the accordion did not have a fixed width, that is); thanks to Hulisz Oliver for reporting;
version 1.0 (September 25, 2011)
  • initial release

Top

36 responses to “Zebra_Accordion, a tiny accordion jQuery plugin”

Follow the comments via RSS
  • Noir, 2014-01-26, 02:51

    Hey,

    very nice little accordion with advanced features but without any bloat! Does something speak against adding an option to select the elements for the accordion head so that it isn’t hardcoded to and anymore?

    Reply
  • Noir, 2014-01-26, 02:53

    Sorry, HTML tags seems to be filtered here… I meant “…so that it isn’t hardcoded to the DD and DT elements…”

    Reply
    • Stefan Gabos, 2014-02-02, 16:12

      it’s something I will consider for the next release, but for now you’ll have to hack the code for that :) thanks!

  • Rollout, 2014-02-11, 20:24

    I have an anchor button in your dt, and dont want the anchor button to trigger the accordion when clicked. Presently, clicking on anything in the dt will trigger the accordion to open/close. How can I change the script to ignore a click on an anchor tag or anchor button in the dt? Thanks.

    Reply
  • Rollout, 2014-02-12, 02:50

    I am using your accordion with a jquery tab plugin. When switching from tab to tab, the accordion is behaving as expected. If I switch to a second tab, refresh the page, then switch back to the first tab, the dd content is overlaying the closed accordion sections on the page- a visual mess. It appears that switching from the 2nd tab back to the first tab is not considered a page refresh by the .js script, and the accordion script is not re-calculating the height of the dd container on page redraw. I have put a temp fix in place by hardcoding the height of the dd container in the zebra_accordion.src.js file. Do you have a better solution so that I dont loose the calculated height of the dd container? Love the features and flexibility of this project.

    Reply

Leave a Reply

Your email address will not be published
You can use <strong>, <em>, <a>, <img>, <code>
Characters are not case-sensitive