jQuery UI Multiple Sections Open Accordion

This plugin is Deprecated!

Last Update: 22-Jul-2011
Today when I was building a web application interface, I was trying to use jQuery UI Accordion, but I didn’t want it to open one tab at a time, I just wanted each accordion tab to toggle between open and close states while pressing it, so I can have more than one tab opened,  what I wanted was not a feature of  jQuery UI’s Accordion, so I tried to look up over the internet if I can find any suitable solution, but could not find anything, so I decided to make the plugin myself,
it works the same way original jQuery UI Accordion do, below you can find the markup and script required to run this plugin,also you can download a working example along with the plugin from my google code profile


download now


Markup

Script

UPDATE:

you have the option to choose which tabs by default will be opened by passing either a number or array of desired open tabs to active option as follows:

UPDATE:

Events

Methods

v.1.5: change log
  • using jQuery UI widget framework
  • fixed: browser goes to the top on tab click
  • fixed: events binding repeated when calling plugin more than once
  • enhancement: adding click, tabShown, tabHidden, and init event bindings
  • enhancement: adding show all & hide all tabs

you can download the source file and an example from google code here

also you are welcome to make any contribution :)

follow me on:

awesome icons by WPZOOM

About these ads

144 thoughts on “jQuery UI Multiple Sections Open Accordion

  1. Claudia

    this works like a charm..if I want to hide a particular H3 / Accordion tab altogether based on a field selection, how would i do that?

    thanks a million

    Reply
    1. Anas Nakawa Post author

      Thanks Claudia for the comment, I have updated the plugin to support active tabs option, see the details above, and don’t forget to download the source file again to get the updates :)

      Reply
      1. Claudia

        Thanks again Anas but how do you hide the title for each section and have it displayed only when someone selects a particular value. example: if I pick contact information from a dropdown list. i want to show the contact information section and then when i click contact information, it expands that section. so a show/hide within a show/hide. Thanks Anas.

      2. Paul

        Hi Anas,

        Thanks for putting this together. I also would like to know how to “hide” a specific pane. If there is not a function like this in your plugin, could you point me in the right direction for a resource on how to make this happen.

        Thanks again!

        -paul

      3. Anas Nakawa Post author

        Hi Paul,
        you can append the following function to the accordion file, right after the end of multiAccordion function, i am using it in my current project but couldn’t find the time to update the plugin:

        multiAccordion: function(options) {
        ...
        },
        tabHide: function(options) {
        	var defaults = {
        		speed: 'fast'
        	}
        	var options =  $.extend(defaults, options);
        	return this.each(function(){
        		var $this = $(this);
        		var $span = $this.children('span.ui-icon');
        		var $div = $this.next();
        		$this.removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all');
        		$span.removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        		$div.slideUp(options.speed, function(){
        			$div.removeClass('ui-accordion-content-active');
        		});
        	});
        }
        

        then u can select the header of the pane you want to hide and call this function:

        $('h3.ui-accordion-header').tabHide();

  2. dana ttwood

    I’ve just tried this out and it works pretty well. However I’ve noticed that instead of opening smoothly in place it causes the page to jump to the top when a tab is opened.

    Reply
    1. Anas Nakawa Post author

      Thanks dan for taking your time submitting this issue to me,
      you can solve it quickly all you have to do is to replace each hash inside the header h3 tag

      <h3><a href="#" >tab 1</a></h3>

      into a ‘javascript:void()’ as follows

      <h3><a href="javascript:void()" >tab 1</a></h3>

      Reply
      1. akmal

        Hai anas,

        i have a problem similar to dana, but after I correcting the problem by replacing the ‘#’ with ‘javascript:void()’, I still can make it work and it seems as it not responding to my click event..do you know how to solve this problem?thank you.

      2. Anas Nakawa Post author

        Hi @akmal, first the issue about the hash ‘#‘ was solved long time a ago, you do not need to place any ‘javascript:void()‘,
        but i am wondering, why do you need to place a click event on the header ?
        does not that will interfere with the normal behavior for the accordion as it supposed to open on click ?

        Thanks

  3. Ian

    I came across the need to have “Show All” and “Hide All” functionality and added the following to your js file in the download:

    lines 21 and 22

    var $show = $this.children(‘.showAll’);
    var $hide = $this.children(‘.hideAll’);

    and

    and lines 26 thru 38

    $show.click(function(){
    $h3.each(function(){
    var $this = $(this);
    showTab($this);
    });
    });

    $hide.click(function(){
    $h3.each(function(){
    var $this = $(this);
    hideTab($this);
    });
    });

    Reply
      1. Anas Nakawa Post author

        @Trev: now I have updated the plugin,
        download it again, and you can use the option active: ‘all’ & ‘none’ after initialization, as follows:

        // to show them all
        $('#multiOpenAccordion').multiOpenAccordion("option", "active", "all");
        // to hide
        $('#multiOpenAccordion').multiOpenAccordion("option", "active", "none");
        
  4. gbonamy

    I have made some changes to the isActive Function it is bit shorter and for the boolean option fix what I assumed was the original intended (if active==true then show all, if active==false then hide all)

    function isActive(num) {
    if (typeof options.active == “boolean”) {
    return options.active;
    }
    // if array
    if (options.active.length != undefined) {
    for ( var i = 0; i < options.active.length; i++) {
    if (options.active[i] == num)
    return true;
    }
    return false;
    }
    return options.active == num;
    }

    Any plans to enable some of the navigation keys?

    Reply
  5. Andy

    thanks – this is really close to what i’m looking. Can this be turned to horizontal, and then inside each tab, a nested vertical that can also be multi open, independent of other open tabs?

    Reply
  6. Norbert

    Hi Anas,

    just wanted to say thank you for the plugin, it works like a charm for me! Keep up the good work!

    Reply
  7. chandan

    hi Anas, Thanks for the great plugin, I was searching it from today morning, Can u tell me, When i using this accordian is in middle of the page, so when ever i m going to click any div, it populates but at the same time its takes me to top of the page,, Could u tell me something about this.?

    Reply
    1. ermannob

      Hi,
      I added a “return false” inside “$h3.click(function(){ ….”.
      It became:

      $h3.click(function(){
      var $this = $(this);
      if ($this.hasClass('ui-state-default')) {
      showTab($this);
      } else {
      hideTab($this);
      }
      return false;
      });

      Reply
  8. tawboiid

    So, I’m curious about the default folder structure when the download is extracted. Is it necessary to have all the duplicate folders for prop-base, props, and text-base? If you open all the folders, there are 6 sets of these, most of which are empty.

    Are they used in some way? Can I remove all the empty ones?

    Reply
    1. Anas Nakawa Post author

      @tawboiid, there are no duplicate folders!
      the content of the zip file are:
      – index.html
      – jquery-1.4.3.min.js (jQuery core)
      – jquery.multi-open-accordion-1.0.1.js (which is my plugin)
      – css file (which contains jQuery UI Theme)

      it seems that you have downloaded the file more than once, and extracted them all!

      Reply
  9. tawboiid

    Is there a way to set a default open header in a dynamic way with code? I tried using the following (code from the jQuery forums), but it doesn’t work:

    var active = $( ".selector" ).accordion( "option", "active" );
    $( ".selector" ).accordion( "option", "active", 2);

    That is what the jQuery folks suggested using to specify a default header to be opened using code.

    Reply
    1. Anas Nakawa Post author

      @tawboiid: first this is multiAccordion which is similar to jQuery UI’s accordion in look and feel, but it differs alot in functionality, unfortunately I did not have the time to update it, you can set the active tab as follows:

      $('#multiOpenAccordion').multiAccordion({active: 1 });
      

      but you cannot get the index of active header, and you cannot define the active header using option parameter as you mentioned.

      Reply
      1. tawboiid

        Perfect, this allows me to pass a variable in the querystring, which I can then insert into the javascript. Like this:

        int intActiveHeader = Request.QueryString["ID"];

        $(‘#multiOpenAccordion’).multiAccordion({active:});

        Thanks. Works great!

  10. Breck

    Hi. Is there any way to programmatically close one tab?

    I know I can change how it initializes–but I’d really like to programmatically close one tab and open 2 others, etc.

    Thanks so much. I’m loving this tool so far.

    Reply
    1. Anas Nakawa Post author

      well you can do this simply by just initiating the multi accordion again and passing it the indexes of the tabs you want to open, rest tabs will be automatically closed,
      for example, if you have accordion of 4 tabs, tab at index 2 is currently opened, and you want to close it and open 0 & 3, you will simply do:

      $('#multiOpenAccordion').multiAccordion({active: [0, 3 ] });
      

      note that it’s not a clean way, it is a workaround, but will do the job for you.
      Hope that helped :)!

      Reply
      1. Svein Helge

        If I do this code as initialize:
        $(‘#multiOpenAccordion’).multiAccordion({active: 0 });

        Then call this from a button click event:
        $(‘#multiOpenAccordion’).multiAccordion({active: [0, 3 ] });

        The events are added twice. So when I click once on a tab it closes and opens again.

        If I click on my button that calls the code again:
        $(‘#multiOpenAccordion’).multiAccordion({active: [0, 3 ] });

        The events are now added three times. So when I click once on a tab now, it closes, opens and closes again.

        From my code you see I’m trying to have one tab open at start and have two open when a button is clicked. Is there an other way to achieve this or will the code be change to only add event once?

      2. Anas Nakawa Post author

        thank you Svein for your comment, actually it has been a very long time since I have placed this plugin here, and I think it is the time to make some updates to it :),
        I have done some major changes to it (and your bug is one of them) but it still need to be tested, hopefully by tomorrow morning (our morning in Dubai) you can download the updated one :)
        Thanks again

  11. Simit Kulkarni

    This plugin is amazing , yet simple. No doubt about it!! Thanks a lot Anas!
    Keep up the good work!

    Reply
  12. Tisha

    Hi Anas! Thanks so much for sharing this code. It’s working fine save for one thing.
    One of my headers doesn’t have a corresponding content. So instead of:

    tab 1

    Lorem ipsum dolor sit amet

    it’s supposedly just a plain link without any submenus below it.
    Example:
    tab 1

    tab 1

    Lorem ipsum dolor sit amet

    So referring to the example above, when I click on header1, it collapses the header directly below it (i.e. header2) as if it were its submenu. I have no background in editing scripts and I was wondering if you could help me disable that activity for that particular header only.

    Thanks in advance. :)

    Reply
      1. Anas Nakawa Post author

        well a simple workaround is to place an empty div, a more sophisticated workaround, is to adjust the code so it will insert an empty div, if there isn’t any…

        sorry for the late response

  13. Tisha

    woops. i’m so sorry. i didn’t know markups get omitted from comments. @_@ anyway, my example was supposed to illustrate the same markup structure as your except that one of the header doesn’t have a corresponding div tag.

    Reply
    1. Anas Nakawa Post author

      @carlos: I have just tried it on IE8, and there was no errors, can you provide what type of error you are getting, or any code snippet of what you are trying to do ?

      Reply
  14. Kashif

    Can you please tell me that how can I maintain states of sections i.e. Open/Close on Postback? Thanks.

    Reply
    1. Anas Nakawa Post author

      @Kashif, after the plugin have been updated, first you have to download the new version, then to get the value of current open tabs

      var activeTabs = $('#multiOpenAccordion').multiOpenAccordion('getActiveTabs');
      // now save that variable and submit it, and on post back, get that variable back and pass it as an option to the plugin as follows
      $('#multiOpenAccordion').multiOpenAccordion('option', 'active', activeTabs);
      

      hope that helped, and sorry for the late response

      Reply
  15. GeorgeR

    The active option doesn’t work in the constructor. If I set it using (‘option’, ‘active’, ‘all’) instead, it works fine. The _setValue function doesn’t get called unless I do this.

    Reply
    1. Anas Nakawa Post author

      @GeorgeR: I have just tested it, it’s working fine with me..
      are you using version 1.5.2 ?
      when passing a tab index to active option, are you passing it as a string or number (string won’t work) ?
      also make sure you’re passing active option on a zero based index, which means if you have 4 tabs, then their indexes are [0, 1, 2 and 3]

      your code should look like the following:

      $('#multiOpenAccordion').multiAccordion('option', 'active', 1);
      // or
      $('#multiOpenAccordion').multiAccordion('option', 'active', [1]);
      
      Reply
  16. daniel

    is it possible to have the whole accordion contained in a master div ? and if the master div change height, the expanded accordions share the space vertically automatic ?

    Reply
  17. Max

    Hello Anas. Thanks for the plug in. I think I found a bug:

    When I close all the tabs using following, the tabs get closed as expected:

    $(‘#accordion’).multiOpenAccordion({ active: ‘none’ });

    But, when I try to open any of the tabs using Javascript, I get an exception. I found that the exception is coming from following code:

    getActiveTabs: function() {
    var el = this.element;
    var tabs;
    el.children(‘div’).each(function(index){
    if($(this).is(‘:visible’)) {
    tabs = tabs ? tabs : [];
    tabs.push(index);
    }
    });
    return (tabs.length == 0 ? [-1] : tabs); //fails here
    },

    The code fails with following exception (I tried in chrome):

    jquery.multi-open-accordion-1.5.2.js:175 Uncaught TypeError: Cannot read property ‘length’ of undefined

    I think this is because since there are no visible divs, the tabs element remains uninitialized and so it cannot run tabs.length because tabs is undefined.

    Thanks

    Reply
    1. Anas Nakawa Post author

      @Max, thanks for taking time submitting your bug, even that I couldn’t inspect the bug in my chrome, but when I looked into the code, I saw what you mean, and I think that initializing the tabs array outside that if statement will solve the problem.

      plugin is now updated :)
      Thanks again,

      Reply
      1. Max

        Thanks Anas. That’s exactly how I resolved the issue for myself.

        Is there a standard way to use elements other than h3 for the header? such as div? The reason I am asking is that I want to display some dynamic status icons in the header, and as per the XHTML 1.0 standard you cannot have div inside h3. For now I have resolved the issue using span, but I guess the ability to use div would have been better.

        Thanks again for updating the plugin immediately.

  18. Barbara

    Hi Anas,

    Thanks for a great plugin. Is there an easy way to pick up the selected h3 so I can style the active header with CSS?

    Many thanks

    Reply
    1. Anas Nakawa Post author

      @Barbara,
      simply you can use the following css selector, to style all active h3 headers

      h3.ui-accordion-header.ui-state-active {
           /* apply your stylings here */
      }
      

      so for example, if you placed the following style

      h3.ui-accordion-header.ui-state-active {
          border: 1pt solid red;
      }

      then all active headers will have a red border.

      hope that helped :)

      Reply
  19. Pingback: JQuery accordion with multiple sections open at once. | wellings.eu

  20. Tom

    Hi Anas,

    Great plug-in and I’m having a good time with it. One problem I am having though:

    I am using: set autoHeight:false to allow each section to open to its own appropriate height.
    In this way I have some sections that have 4 or 5 rows of height, while other sections have up to 80 rows of height. The problem is that I would like to limit the 80 row sections to a smaller number like 20 rows.

    Is there a way to specify a maximum height (with scroll bar when needed) while having the autoHeight set to false?

    Reply
    1. Anas Nakawa Post author

      Thanks @Tom,
      unfortunately there is no current support for autoHeight, but i think you can use the css property max-height, unless you’re targeting IE6.

      Reply
      1. Tom

        Perfect. Can’t believe I didn’t try that. Guess I was making it too hard.

        I added style=”max-height:200px;” to the div tag and it works exactly like I wanted.

        Thanks.

  21. hbrt

    Great plugin!

    My input for this: there is a mistake in SCRIPT section: there should be multiOpenAccordion() instead of multiAccordion().
    And the second thing: I had some problems running other scripts with the function Array.prototype.hasObject. I use many other libs, maybe they started to bite each other? The code I had an issue was:

    var label = $(”).attr(‘for’, checkbox.attr(‘id’));

    The JS Opera engine told me the attr function was not defined :-/ I needed to rename your function to work it out.

    All that said – this plugin is awesome. Thanks!

    Reply
  22. Tristan Sinns

    Hello Anas,

    Very useful plugin! I do have one question – is there a way to obtain the index of the clicked tab? I attempted to use getActiveTabs within the click, tabShown, and tabHidden events, but found that the array returned were the states immediately *before* the event, and not after.

    Would there be a simple way to do this that I’m missing? The UI object within each of those events also appeared to be missing the index, unless I’m missing something here (entirely possible).

    Thanks!

    Reply
    1. Tristan Sinns

      I believe I found an answer to my own question. If you modify your .js source file in the create, showtab, and hide tab functions from:

      var ui = {
      tab: $this,
      content: $this.next(‘div’),
      }

      …to…

      var ui = {
      tab: $this,
      content: $this.next(‘div’),
      id: $this.next(‘div’).attr(‘id’)
      }

      …and then supply your tab div’s with an id in their declaration, then the ID of the div being hidden or shown can be fetched in the show and hide events via a simple “ui.id”.

      There may have been an easier way to do this, but this worked for me!

      Reply
    1. Anas Nakawa Post author

      thanks a lot @David, it’s a CSS3 feature called border-radius, and it’s presented in IE9+,
      on other browsers it is also there since these versions (Firefox 2.0+, Chrome 2+, Safari 3.2+ and Opera 11 i think) that’s the way in all jQuery UI plugins, not only mine ;)
      see the following link (try opening it using Chrome)
      http://html5readiness.com/

      Reply
      1. David Krauss

        Thanks!

        Also found that the click event does present the previous state if you use getActiveTabs (as someone else said), but if you use it to trigger a setTimeout with about 10ms delay, then use getActiveTabs, it gets the correct state of the tabs.

        Nice work, Anas, i’m using it now!

  23. scrwtp

    Thanks for the plugin! Your contribution likely saved my team several good hours of work ;)
    As for now it works great, I’ll let you know if we’ll be making any worthwile modifications.

    Reply
  24. VaN

    I might be a dumbass, but i have troubles making this plugin works correctly.. first, there is a mistake in the documentation..

    $(‘#multiOpenAccordion’).multiAccordion(); won’t initialize anything..
    $(‘#multiOpenAccordion’).multiOpenAccordion(); will.

    Then, i just can’t make the option active: ‘all’ works. nothing happens. tried to debug it, looks like the _generateTabsArrayFromOptions() function is never called by the script..

    Least but not last, what if we use instead of ? I had to every call in the script…

    Maybe this plugin is good, but at the moment, it just looks like a troll to me…

    Any help would be appreciated to make active: ‘all’ works..

    Reply
  25. Tee

    like VaN said, it doesn’t work for me also. the init call multiAccordion is wrong and will throw JS exception. If i use multiOpenAccordion() then no exception but nothing works also. Am I missing something?

    Reply
  26. steve

    Anas, thanks for the plugin. I’ve used it for a site I’m building and all was great until I tried it in IE9. The panels will not collapse once opened!
    Any ideas how to fix this? I’ve tried so many things to do with altering the doc type but nothing works.

    Reply
  27. anjireddy

    I dont know how can i open multile tabs at a time.I am using
    $(‘#multiOpenAccordion’).multiOpenAccordion(“option”, “active”, 1,2,3);
    (or)
    $(‘#multiOpenAccordion’).multiOpenAccordion(‘option’, ‘active’, 1,2,3);

    Its opening first tab what i mentioned in the multiopenaccordian function.

    Please help me to resolve this issue

    Reply
    1. Anas Nakawa Post author

      First it doesn’t matter if you use single quote or double, both are fine,
      Your problem is because your passing 1,2,3 as 3 parameters, and my plugin will read only the first one,

      Simply all you have to do is to encapsulate them inside array [1, 2, 3], so your code should look like the following..

      $(‘#multiOpenAccordion’).multiOpenAccordion(‘option’, ‘active’, [1, 2, 3] );

      Reply
      1. anjireddy

        Hello Anas,

        Very useful plugin!.It works me like a charm.Here i am trying to save active tabs in session and trying to open active tabs.The below line of code did that work for me.I hope this may help some other who is going to use this great plugin.
        $(‘#multiOpenAccordion’).multiOpenAccordion(“option”, “active”, []);

  28. anjireddy

    i dont why this missed my sessionvariable which is there between angulerbraces.Just place yor session variable inside that you will get the requied functionality

    Reply
  29. BZeeB

    2 things,

    1) $(‘#multiOpenAccordion’).multiAccordion(); doesn’t work for me like it shows in the examples above. I had to use $(‘#multiOpenAccordion’).multiOpenAccordion();

    Also 2) I can’t get the active:’all’ to work
    e.g $(‘#multiOpenAccordion’).multiAccordion({active: ‘all’ }); all tabs are unactive

    Reply
    1. BZeeB

      Sorry leme try that again.

      2 things,

      1) $(‘#multiOpenAccordion’).multiAccordion(); doesn’t work for me like it shows in the examples above. I had to use $(‘#multiOpenAccordion’).multiOpenAccordion();

      Also 2) I can’t get the active:’all’ to work
      e.g $(‘#multiOpenAccordion’).multiOpenAccordion({active: ‘all’ }); all accordion h3 tags are unactive(but functionally still working fine and themed correctly)

      I’m using jquery-1.6.2.min.js, the only thing I copied from your code was your min’ed js.

      Reply
  30. Steve Robertson

    Thanks for the plugin, it’s been really useful.

    I’m having problems though setting the active tabs using a dynamically generated array. Each tab has a list of checkboxes and I want any tab where at least one checkbox is checked to appear open when the page loads, like this:

    var openSectors = new Array();
    $(“.jobsector”).each(function(){
    var count = $(this).attr(‘id’);
    var checked = $(this).find(‘input:checkbox:checked’).length;
    if (checked > 0) {
    openSectors.push(count);
    }
    });

    if (openSectors != ”) {
    $(“#jobsectors”).multiOpenAccordion(‘option’, ‘active’, [openSectors]);
    }

    where $(‘.jobsector’) is the div for each tab and “count” is the id of the div, which I have set as a simple counter to increment by 0, 1, 2, 3, etc. for each tab.

    In the example I’m working with, I’m getting an array returned with the values 6,8.

    I have tried it with and without the square brackets but it doesn’t make any difference.

    Any help you can provide would be greatly appreciated.

    Reply
    1. Steve Robertson

      I worked it out eventually. The ID’s were being stored in the array as strings, so I changed line 6 to read:

      openSectors.push(parseInt(count));

      And on line 11 I removed the square brackets like so:

      $(“#jobsectors”).multiOpenAccordion(‘option’, ‘active’, openSectors);

      Works like a charm now!

      Reply
  31. Boris Batkin

    Worked llike a charm. Now, I did not want it to animate. This sliding is cool looking and all, but I don’t need it every time. Sometimes I need my tabs to instant-change. So I added an option like this (diff follows)

    14a15
    > animated: false,
    102c103
    $div.slideDown(options.animated ? ‘fast’ : 0, function(){
    119c120
    $div.slideUp(options.animated ? ‘fast’ : 0, function(){

    Reply
  32. Brad Guy

    Do you have an option for cookies?
    I want to load this on my products search page but if a user clicks on a item to view it and then goes back to the inital search page I’d like the menu as they left it…

    Reply
    1. Anas Nakawa Post author

      Thanks for notifying me about this issue @Bill, I guess it is now working :)
      the problem is that I was calling console.log, which will cause an error if your developer toolbar is not opened !

      Reply
  33. kim

    Hi Anas,
    Need your help, is there any way to programmatically open one tab when clicked and at the same time hide other tabs?

    Reply
  34. Majsterka

    Hi, great work :) I like it.
    Can you show me how can I change header picture/color?
    I want use more color in header to indicate state information about devices (green for connected…).Is it possible to change it in c# code?
    Thanks

    Reply
  35. Tom

    Very nice plugin!

    I need to add two public functions (show_all and hide_all) to enable applications to call when user wants to close or hide all tabs. I want to have a two links in my ui, one for show all and other for hide all. When user clicks on show all link, I want to call show_all function to show all tabs and so on. What is the way to extent the plugin to add show_all and hide_all functions that applications can call when they need to after the multiaccordion is initialize? I would appreciate a sample. Thanks.

    Reply
  36. Sled

    Great plugin, thanks! Is there a way to show all from a link external of the accordion (still on same page)?

    Reply
    1. Sled

      Tom,
      I put a click function in the document ready section:

      //view all link click for multi accordion
      $(“a#multiAccordionViewAll”).click(function (event) {
      $(“#multiAccordion”).multiAccordion(“option”, “active”, “all”);
      });

      and for the link it was simply this:
      View Full List

      Sounds like Anas’ link worked for you though.
      Cheers,
      Sled

      Reply
  37. Tom

    Thanks for your responses. It all works as expected but passing options during initialization is not working in chrome browser.
    The following statement has no effect:
    $(‘#multiAccordion’).multiAccordion({ative: ‘all’});

    And the following open all tabs after it initializes but all css properties are not setup/loaded properly.
    $(‘#multiAccordion’).multiAccordion(‘option’, ‘active’, ‘all’);

    What is the call syntax to initialize and open all tabs at the same time?
    Thanks.

    Reply
  38. Wolf

    hi Anas, thanks for the plugin.

    I have a function that dynamically creates tabs of the accordion, and not always all of them are created, is possible to open multiple tab using id?

    like: $ (‘# multiAccordion’). multiAccordion ({active: ['tab2' tab3 ']});

    Reply
  39. Mark

    Hi Anas

    This is a great plugin. One problem i’ve got is when the page loads/reloads, you can see some of the content before the accordion collapses. Is it possible to stop seeing this brief filcker of content?

    Reply
  40. schwann

    How check which tab was cliked to show
    Check in event- example for tabShown – to load ajax content when tab is opening

    tabShown: function(event, ui) {

    var elemTab = ui['tab'];
    var indexTab = $(‘#multiAccordion > h3′).index(elemTab);
    //indexTab – which tab was clicked 0,1,2,…..

    //get content
    switch(indexTab)
    {
    case 0: //tab1
    //execute code block 1

    //get ajax content tab1 – sample with ajax.get()
    $.get(‘ajax/content0.html’, function(data) {

    //load content into tab’s div
    $(ui['content']).html(data);
    });

    break;
    case 1:
    //execute code block 2
    break;
    case 2: //tab3
    //execute code block 3
    break;
    case 3: //tab4
    //execute code block 4
    break;
    }

    //console.log(‘shown’)
    },

    Reply
    1. schwann

      Please add to source
      ui['indexTab']
      as

      indexTab = $(‘#ID-MULTIACCORDION > h3′).index(ui['tab']);

      id from div
      (use with Sub multiAccordion)

      Its can help use lib

      Reply
  41. Sled

    hi Anas,
    Everything is working great in all browsers – except in ie8. Getting an ‘object doesn’t support this property or method’ on load, and in debugging it points to line 267 of the plugin file, which is in the helper array hasObject function. Any ideas on that? Cheers!

    Reply
  42. Larry Ashkenas

    Hi Anas,
    I keep getting scroll bars on some of the 6 panels I have active and open (open or closed, the scroll bars appear). I will admit, however, that I am using tables within the panels as opposed to divs with css. Also, the panels are all different sections of a single form, i.e. the is in the top panel and the is in the bottom. Before I start re-arranging and/or re-writing everything, I would like to know if scroll bars are common and if so, how do I suppress them? Interestingly enough, the vertical scroll bars do not actually show anything visible when they are scrolled? There are no horizontal scroll bars. I would like to get rid of them.

    Reply
  43. doug

    Hi Anas,
    thanks for posting your code. I did notice that my google map i had on the page disappeared after including your library. Not sure if you’ve run across this before.
    thanks

    Reply
  44. Jeff

    I want to use Ajax to append additional sections to my “MultiAccordion” section, however when I append the new html, the multiAccordion widget doesn’t style, bind, etc to my new and tag. For a more simple example, I added a button to your example:

    And then added this method to the Javascript section. My example does append the new html, but doesn’t get incorporated into the widget part. How do I re-initialize the section so it incorporates my new html segment?

    $(‘#mybutton’).click(function() {
    $(“#multiAccordion”).append(“New TabHello World”);
    $(“#multiAccordion”).multiAccordion();

    });

    Reply
  45. Jeff

    Looks like some of my markup got lost in translation. My button name is “#mybutton” and my html segment is basically one of the sections in the example…includes h3 and div tag.

    Reply
  46. shailesh

    success:function(data){
    var activeTabs = $(‘#accordion’).multiAccordion(‘getActiveTabs’);
    getRefresh();

    $(‘#accordion’).multiAccordion({active: [activeTabs] });
    }

    I want to open respective tabs after reload a particular div above code I will try but that will not work please help me.

    Reply
  47. Dan

    Excellent plugin! I just added it to my site and I’m delighted to see that it Just Works, which is the highest possible praise these days. You might want to mention explicitly that it’s compatible with jQueryUI styling, which was one of my concerns.

    Thanks!

    Reply
  48. Dan

    I ran into an issue in IE (happens in 7-9) where it didn’t like setting the active option, example -> $(“#id”).multiOpenAccordion(“option”, “active”, [0, 1, 2]);. I traced the error into your hasObject helper method. The fix is to add prototype in the check for indexOf:

    Array.prototype.hasObject = (!Array.indexOf ? function (o) {

    To this:

    Array.prototype.hasObject = (!Array.prototype.indexOf ? function (o) {

    Reply
  49. Dan

    When calling this plugin, I get the following errors:

    in jquery.multi-accordion-1.5.3.js:
    Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘widget’

    and in my page’s .htm file:
    Uncaught TypeError: Object [object Object] has no method ‘multiAccordion’

    I know I’m missing something incredbibly obvious. Any clue?

    Reply
      1. Dan

        The customized jQuery UI shows up in Chrome’s resource list and I can browse/search it so I know it’s linked. Showing 146 instances of the word ‘widget’ inside the file; it’s definitely there. I hope I can get this plugin working, it’s exactly what I’ve been looking for. Thanks for being so responsive.

      2. Dan

        It seems to be an issue with the Dreamweaver template structure. I completely remade the page at hand with real code instead of template code and it works exactly like it’s supposed to. I’m not sure exactly why at the moment but I’ve been fiddling with this thing for a few hours now so I’ll just not be using a template for my FAQ…soblem provled.

      3. Dan

        Had it then I lost it. I started stripping away extraneous code in an attempt to see what was preventing the script from triggering. There’s doesn’t seem to be anything left. Can you tell why it won’t load in this html page?

        http://jsfiddle.net/VH2Bx/

      4. Dan

        I was totally loading your plugin before the library… I can’t believe how simple that was… :(

        I didn’t bother with the jQuery CSS file because it’s only styling, the JavaScript should (and does) work without it. This way I can keep the styling consistent with my site.

        Thank you so much!!!!!

  50. Dimitri

    Hi,

    Thanks a lot for this plugin, it’s really nice.

    I’m able to dynamically close an accordion with
    $( “#multiaccordion” ).multiAccordion( { active: [0,2] } );

    But I’m unable to open one this way. I read all the comments and did not found a solution for this. Any idea ?

    Regards,
    Dimitri

    Reply
  51. Muhil

    @DAN: Umm there is a simple enough fix

    $(‘#multiAccordion’).multiAccordion();

    should actually be
    $(‘#multiAccordion’).multiOpenAccordion();

    cheers :) :)

    Reply
  52. cupidvogel

    Fantastic plugin. Thanks! One issue, the accordions don’t slide down smoothly. It starts sliding down smoothly, then there’s a small stutter, then the sliding down is complete. How to solve this?

    Reply
  53. amergin

    Is there a way to dynamically add sections to multiAccordion? With accordion I’ve seen people doing .accordion(“destroy”) and then redefining accordion to show the added section. This didn’t work with multiAccordion.

    Of course I could just add a bunch of h3 sections with style=”display:none;” on page load and then toggle the visibility as needed, but is there a more elegant way to do this?

    Reply
    1. Jeff

      I am using MultiAccordians. I have a button that makes an Ajax call (to Spring Controller) that returns an html snippet with the h3/div markups and populates it with an object that was created from the Controller. This creates new DIV sections of the accordion.

      In my AJAX success function… I first “Destroy” the old accordion using the destroy method that currently exists. Then I call a “refresh” function to re-initialize the accordion. I created the refresh function myself by copying a piece of the original code and modifying it slightly. Part of my requirement was to close all of the other DIVS and open up the latest div, hence the extra few lines. Basically I have a form field keeping track of how many active divs I have on the page, so when I create the new section, I increment that field and use that in recalling the normal re-initialize code. I realize I am re-initializing a lot and its probably way over kill, but due to time it seemed to work with no performance issues.

      Below is a quick snippet of what I am doing. If something doesn’t make sense or you need more, let me know and I’ll try to add more details.

      Bottom line, I am able to dynamically create new Accordion sections. But to do so I needed to destroy, then re-initialize by creating a new function that reuses part of the original code.

      ———- Modified jquery.multi-accordian.js – Added Refresh function —-

      // refresh: re-initialize (I hacked this up to make it work)
      refresh: function() {
      var self = this,

      options = self.options,

      $this = self.element,

      $h3 = $this.children(‘h3′),

      $div = $this.children(‘div’);

      $this.addClass(options._classes.accordion);

      $h3.each(function(index){
      var $this = $(this);
      $this.addClass(options._classes.h3).prepend(”.replace(/{class}/, options._classes.span));
      if(self._isActive(index)) {
      self._showTab($this)
      }
      }); // end h3 each

      $this.children(‘div’).each(function(index){
      var $this = $(this);
      $this.addClass(options._classes.div);
      }); // end each

      $h3.bind(‘click’, function(e){
      // preventing on click to navigate to the top of document
      e.preventDefault();
      var $this = $(this);
      var ui = {
      tab: $this,
      content: $this.next(‘div’)
      };
      self._trigger(‘click’, null, ui);
      if ($this.hasClass(options._classes.stateDefault)) {
      self._showTab($this);
      } else {
      self._hideTab($this);
      }
      });
      —————————

      ——— My JavaScript File ———
      submitHandler: function(form) {

      $(form).ajaxSubmit(
      {
      // target: ‘#addEFPlansContainer’,
      clearForm: true,
      success: function(html){
      $(“#entryFeePlanDialog”).dialog(“close”);
      successCallbackEFPlans(html);
      },
      error: failureCallbackEFPlans
      }
      );
      }

      function successCallbackEFPlans(html)
      {
      $(“#multiAccordion”).append(html);
      $(“#multiAccordion”).multiAccordion(‘destroy’);
      $(“#multiAccordion”).multiAccordion(“refresh”);

      var myIndex = $(‘#numOfPlans’).val();
      if(myIndex != null){
      var newIndex = parseInt(myIndex) + 1;
      $(‘#multiAccordion’).multiAccordion({active: newIndex });
      $(‘#numOfPlans’).val(newIndex);
      } else {
      $(‘#multiAccordion’).multiAccordion({active: ‘none’ });
      }

      initEntryFeeDataTable();
      }

      function initEntryFeeDataTable()
      {
      $(‘.dataTable’).dataTable({
      “bDestroy”:true,
      “bJQueryUI” : true,
      “bPaginate” : true,
      “iDisplayLength”: 5,
      “bLengthChange” : true,
      “aLengthMenu”: [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
      “bFilter” : true,
      “bSort” : true,
      “bInfo” : true,
      “bAutoWidth” : false,
      “aoColumnDefs”: [{ ‘bSortable': false, ‘aTargets': [ 'table_buttons' ] }],
      “fnDrawCallback”: function() {
      // unbind all the existing events on the existing buttons. If we don’t do this we get multiple events firing for each row added.
      $(‘.deletePlanRate’).unbind(‘click’);
      $(‘.editPlanRate’).unbind(‘click’);

      //bind the click handler script to the newly created elements held in the table
      $(‘.deletePlanRate’).bind(‘click’, deletePlanRate);
      $(‘.editPlanRate’).bind(‘click’, editPlanRate);
      }
      });
      }
      ———

      Reply
  54. Vladimir

    Hello,

    great work, thanks a lot!

    Please help me with that: I need to achieve this sortable functionality:
    http://jqueryui.com/demos/accordion/sortable.html

    which means I need to nest the header and container in another div:

    Section 1
    Blah blah.. Blah blah.. Blah blah.. Blah blah.. Blah blah..

    in order to drag the elements in the group together. The original jquery ui implementation do this like:

    $(function() {
    $( “#accordion” )
    .accordion({
    header: “> div > h3″
    })
    ………

    How can this be done with the multiple accordion? I think this is a common issue for many people and could be handy to clarify it.

    cheers,
    Vlado

    Reply
    1. Michael

      Hello,

      this is an awesome plugin!
      I have the same question as Vladimir. Is there an implemented methode for using it with sortable like it works in default accordion ? I can’t manage to get this working.

      Best Regards, Michael

      Reply
  55. Tim

    Hi, this is a great addition to jquery. I can’t understand why they don’t make it an option in the accordion.

    I had a problem getting this to work, but finally got it by checking your source. There is no function called multiAccordion in the latest download, It’s called multiOpenAccordion.

    Reply
  56. Pingback: extend jquery accordian plugin - feed99

  57. Pingback: How to extend the jQuery accordion plugin - feed99

  58. Ranjith

    thanks man!! great plugin.. i was using Jquery UI accordion and suddenly had to change to make every slide independent. This plugin made it super simple to change it… saved a lot of time and thanks also for the support you are giving to comment questions. :)

    Reply
  59. Arunsri

    Hi,
    I displayed this multi accordion panel menu in my master page screen and when i click the menu item inside menu it redirect the link to another page.. so the page load happens..
    When the page load happens this plugin again called and open only one div as mentioned like first time.. I want to get the opened div again when the page loads.
    In tabHidden event I put the getActiveTabs call but it return the active tabs before closing.. so I cannot track whick div are all opened.
    Please give me the solution to find the last closed div positions in tabHidden event..

    Reply
  60. cool

    This is great and all, but it seems like a lot of work when all you need to do to make it work with the jquery provided accordion is add multiple single pane collapsible accordions to your page.

    Reply
  61. itilk

    I was playing with this widget today and it didn’t quite layout right with jquery 2.0.2 and jquery-ui 1.10. By adjusting the classes in the js file like below it corrected the issue:

    accordion: ‘ui-accordion ui-widget ui-helper-reset’,
    h3: ‘ui-accordion-header ui-helper-reset ui-accordion-icons ui-accordion-header-active ui-state-active ui-corner-top’,
    div: ‘ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom’,
    divActive: ‘ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active’,
    span: ‘ui-accordion-header-icon ui-icon ui-icon-triangle-1-s’,
    stateDefault: ‘ui-state-default’,
    stateHover: ‘ui-state-hover’

    Thanks for the nice plugin!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s