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
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);
close  

Collapses a content block. 

close(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
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 thas 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 (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

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

Follow the comments via RSS
  • Clay, 2011-10-13, 21:39

    Is there a way to make all the blocks be collapsible (collapsible=true) but to have them all default to un-collapsed? I’ve been messing with options but haven’t figured out a combination yet. I’m sure this is basic, but I’d appreciate the help.

    And I love this plugin!

    Reply
    • Stefan Gabos, 2011-10-14, 06:39

      as it is stated above, in the configuration options, if you set the “show” property to FALSE, all tabs should be collapsed *if* the “collapsible” property is set to TRUE

  • Clay, 2011-10-15, 11:45

    Sorry, that is the opposite of what I’m trying to do. I would like all sections to be expanded by default but also able to be collapsed. With “show” set to FALSE and “collapsible” set to true, they all start collapsed.

    Reply
    • Stefan Gabos, 2011-10-15, 15:34

      i misinterpreted your comment, sorry; but that’s an odd behavior you want from an accordion :) nevertheless, I’ll consider it for the next version

  • hagrin, 2011-10-20, 07:22

    Excellent plugin.

    I was wondering – is there a way for me to add a “+” image when a content block is closed and then have that image change to a “-” when the content block is open?

    Thank you in advance.

    Reply
    • Stefan Gabos, 2011-10-20, 07:29

      yes! :) you just have to write your callback functions that take care of adding the “+” and “-” signs and then you attach those functions to the onClose and onOpen events. read the configuration options to see what arguments will the callback functions receive

    • Will, 2012-07-27, 15:47

      You can also do something similar using CSS (using the background attribute):

      
dl.Zebra_Accordion dt { 
  background: #efefef url("images/arrow.png") no-repeat 99% 50%; 
  color: #000; 
  font-size: 1.5em; 
  padding: .25em .5em; 
}
dl.Zebra_Accordion dt:hover {
  background: #ddd url("images/plus.png") no-repeat 99% 50%;
}
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { 
  background: #666 url("images/minus.png") no-repeat 99% 50%; 
  color: #fff; 
  font-size: 2em;
}
    • Stefan Gabos, 2012-07-27, 17:14

      oh, right :)
      as will says, it’s actually as simple as styling through the “Zebra_Accordion_Expanded” class which is attached to the open tabs.

      thanks will!

  • Oliwa, 2011-11-14, 13:35

    I try to use you accordion in a responsive Layout, but the height of the collapsed field did not update itself when the text gets more lines (when the block gets smaller), it just updates after a reload. Is there any way to fix this? i tried height: auto but that doesnt fix it. Anyway, great and easy to use plugin!

    Reply
  • Daniel, 2011-11-25, 23:09

    Hi, thanks for the plug-in

    Is there a way to make it behave as default:

    ‘collapsible’: false

    but also have all of the items hidden at first. I tried to add a

    var myAccordion.hide(0);

    at the end of the page inside a script tag. But that didn’t work.

    Reply
  • Daniel, 2011-11-25, 23:24

    Never mind I used:

    $(document).ready(function() {
    var myAccordion = new $.Zebra_Accordion($('.Zebra_Accordion'), {
        'scroll_speed': 0,
        'show_speed': 0,
        'hide_speed': 0
    });
    myAccordion.hide(0);
});

    and it worked

    Reply
    • Stefan Gabos, 2013-03-23, 21:08

      it should be

      $(document).ready(function() {
    new $.Zebra_Accordion($('.Zebra_Accordion'), {
        'show': false
    });
});
  • Zebra Whisperer, 2012-06-01, 11:33

    Hi there, I am using Zebra_Accordion inside a CMS. I can write any code inside the document body but i can’t use stylesheets or inline styles because those belong inside head. Basically, that’s no problem because I can use style attributes or (perhaps better) the .css() method from jQuery to modify any class under dl.Zebra_Accordion.
    However, this fails for the .Zebra_Accordion_Expanded class. In fact, it turns out that if I want to modify this class, then I must not use the .css() method at all. In other words, it appears that I am forced to use but that’s not allowed in the body (even if it might work in some browsers).
    Is there any fix for this situation?

    Reply
  • Zuleika, 2012-06-08, 22:24

    i have some problems with “‘collapsible’: true” and resize, can you help me to fix that?

    i made a function to resize (cause i have tabs with various height inside the accordion) the function is equal a bind.reisze function.

    i need your help, thanks

    Reply
  • Stefan Frede, 2012-06-28, 13:04

    Hi,

    I think I found a bug. If I come on the page everything is working fine (http://cl.ly/HicF) but when I reload the page a floating bug (I guess) occurs (http://cl.ly/HirE). When I resize the the page it is gone.

    Is this known and is there a solution for that? Thanks in advance.

    - Stefan

    Reply
    • Stefan Gabos, 2012-06-28, 14:49

      are you sure it is not from some of the styles on the page?

  • Sarika, 2012-12-11, 08:19

    Hi,
    Love this accordion, works great.
    One thing,
    I need the accordion to open the correct tab when an anchor link is clicked, can you give me any advice on how to do this please?
    Thanks!

    Reply
    • Stefan Gabos, 2013-03-23, 21:06

      i don’t think this functionality should be part of this library’s scope – you should manually check the hashtag in the url and open the appropriate tab yourself

Leave a Reply

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