Zebra_Accordion, a tiny accordion jQuery plugin

Get the latest updates on this jQuery plugin via RSS

You are currently browsing comments. If you would like to return to the full story, you can read the full entry here: “Zebra_Accordion, a tiny accordion jQuery plugin”.

40 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!

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

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

    • 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!

    • Jacek, 2013-07-16, 12:12

      Yep I have same problem.

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

  • 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

    and it worked

    • 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?

  • 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

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


    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

    • 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

    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?

    • 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

  • Aaron, 2013-06-19, 19:30

    Hello Stefan,

    Your documentation on this page says that the accordion has a public “close” method. However, in the copy I have the public method is actually called “hide”. You may want to update that when u get a chance.

    Thanks for the plugin.

    • Stefan Gabos, 2013-06-21, 15:34

      fixed! thank you!

  • Luc Verleije, 2013-06-23, 22:28

    Hi Stefan,

    I’m trying to combine two functionalities.
    At pageload all the items off the accordion should be collapsed (which works fine using ‘show’: false ).

    Now I would like to make it possible to:
    1. Expand an item clicking a title (no problem here)
    2. Collaps the expanded item by clicking it’s title again OR make it collaps if another item is expanded.
    Is there a way to do this?

    Thanks for your reply!

    • Stefan Gabos, 2013-06-24, 07:16

      sorry, “collapsing an expanded item by clicking it’s title OR make it collapse if another item is expanded” cannot be done…it’s either all tabs can be opened/closed at will, either only one stays always open. it’s how accordions work

  • paul, 2013-09-19, 16:33

    How about adding “beforeClose” and “beforeOpen” configuration options? I tried adding it directly to my $(document).ready function, but there were conflicts with your JS logic.

    • Stefan Gabos, 2013-09-20, 10:11

      I agree and I’ll try and add them as soon as possible. thank you!

  • Paddyof, 2013-10-21, 16:23


    I’m trying to split a zebra_form across an accordion.

    The form contains many many elements (!), such as tenant details, property details, landlord details, electricity & gas readings etc. I wish to have each of these as an accordion window, and then the last window is the “submit” button.

    I gather the element is each accordion “window”.

    However, when I try to split the form across multiple tags, the form either renders in each or it renders in total in the last

    How can I “split” the zebra form across the entire accordion?


    • Paddyof, 2013-10-21, 18:14

      Started messing with the custom templates, and I think I have it working now! Just to play around with it to get the layouts correct!

    • Paddyof, 2013-10-21, 18:59

      Hmm, can;t figure out how to do a custom template with the labels to the left (ie *horizontal on the auto templates)

    • Stefan Gabos, 2013-10-22, 11:22

      that’s what the examples are for…

    • Paddyof, 2013-10-22, 12:17


      I notice when I have an error box pop-up, e.g. “Phone Number too short”, and I then click on one of the other accordion sections, the pop up alert stays on screen as if the relevant field is still there?

  • Paddyof, 2013-11-02, 14:21

    Excellent form and accordion working together now. Many thanks for all the work here in developing the system.

    Question though, my form has some radio buttons that, when clicked, open up further questions that require answers. This all happens inside an accordion panel.
    However, if I use combinations of show()/hide() and.or “display:block” and “display:none” to show/hide the extra questions, I can’t get the panel to re-size “on the fly”. Either I get the extra space reserved (but blank) for the questions, or when they display, they overlay the entire accordion, extending over the remaining accordion title bars.

    Any ideas?


Leave a Reply

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