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

Markup

	<div id="multiAccordion">
	<h3><a href="#">tab 1</a></h3>
	<div>
	Lorem ipsum dolor sit amet
	</div>
	<h3><a href="#">tab 2</a></h3>
	<div>
	Lorem ipsum dolor sit amet
	</div>
	<h3><a href="#">tab 3</a></h3>
	<div>
	Lorem ipsum dolor sit amet
	</div>
	<h3><a href="#">tab 4</a></h3>
	<div>
	Lorem ipsum dolor sit amet
	</div>
	</div>

view raw

jQuery-multi-open-accordion.html

hosted with ❤ by GitHub

Script

	$(function(){
	$('#multiAccordion').multiAccordion();
	});

view raw

jQuery-multi-open-accordion.js

hosted with ❤ by GitHub

UPDATE:

	$(function(){

	// this will make the second tab by default opened (index starts from 0)
	$('#multiAccordion').multiAccordion({active: 1 });

	// [ OR ]
	// supports multiple tabs to be opened by default
	$('#multiAccordion').multiAccordion({active: [1, 2, 3] });

	// show all tabs
	$('#multiAccordion').multiAccordion({active: 'all' });

	// hide all tabs
	$('#multiAccordion').multiAccordion({active: 'none' });

	// you can set the options as any jQuery UI plugin using option method
	$('#multiAccordion').multiAccordion('option', 'active', 'all');
	});

view raw

jQuery-multi-open-accordion.js

hosted with ❤ by GitHub

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

	/* fired when any tab is clicked, ui here hold clicked tab and its content
	* ui['tab'] // current tab
	* ui['content'] // current tab content (div)
	*/
	click: function(event, ui) {}

	// when accordion is initialized, ui here holds a jQuery object to the whole accordion
	init: function(event, ui) {}

	// when tab is shown, ui here hold the same as in click event above
	tabShown: function(event, ui) {}

	// when tab is hidden, ui here hold the same as in click event above
	tabHidden: function(event, ui) {}

	// How can you bind these events ?

	// 1. at plugin initialization
	$('#multiAccordion').multiAccordion({
	active: 'all',
	click: function(event, ui) {
	alert('tab is clicked!');
	}
	});

	// 2. after initialization
	$('#multiAccordion').multiAccordion('multiAccordionclick', function(){
	alert('also clicked');
	});

view raw

jQuery-multi-open-accordion.js

hosted with ❤ by GitHub

Methods

	// destroying the plugin and removing all handlers, and styles
	$('#multiAccordion').multiAccordion('destroy');

	// get an array of active tabs, if no active tabs it will return a one element array with [-1] value
	$('#multiAccordion').multiAccordion('getActiveTabs');

	// you can use the previous method to get active tabs value, then you can set it later simply by
	// retrieve
	var activeTabs = $('#multiAccordion').multiAccordion('getActiveTabs');
	// set
	$('#multiAccordion').multiAccordion('option', 'active', activeTabs);

view raw

jQuery-multi-open-accordion.js

hosted with ❤ by GitHub

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

144 thoughts on “jQuery UI Multiple Sections Open Accordion”

Claudia February 15, 2011 at 7:24 pm

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 authorFebruary 16, 2011 at 6:42 am
  
  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 February 17, 2011 at 1:03 am
    
    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 April 1, 2011 at 4:05 pm
    
    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 authorApril 4, 2011 at 5:21 am
    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();
dana ttwood February 21, 2011 at 4:49 pm

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 authorFebruary 22, 2011 at 5:55 am
  
  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. dana ttwood February 22, 2011 at 4:37 pm
    
    Thanks for that works like a charm
  2. akmal February 21, 2012 at 12:02 pm
    
    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.
  3. Anas Nakawa Post authorFebruary 23, 2012 at 3:59 am
    
    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
Ian February 22, 2011 at 10:51 pm

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. Trev July 18, 2011 at 3:48 pm
  
  How do you trigger these?
  
  Reply ↓
  1. Anas Nakawa Post authorJuly 21, 2011 at 11:28 pm
    @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");
murl March 21, 2011 at 9:58 pm

Anas, I’m curious, can this plugin accept the Navigation property like the accordion object?

Reply ↓
1. Anas Nakawa Post authorMarch 22, 2011 at 7:49 am
  
  nope, not for the current time.
  
  Reply ↓
gbonamy April 10, 2011 at 7:49 pm

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 ↓
Andy April 11, 2011 at 2:18 am

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 ↓
1. Anas Nakawa Post authorApril 11, 2011 at 5:30 am
  
  you can do nested accordions but the vertical accordion is not supported.
  see this example:
  http://jsbin.com/inawa4/5
  
  Reply ↓
2. pyromango January 24, 2012 at 3:49 am
  
  Thanks. Same problem here. Any tip on how to make this horizontal?
  
  Reply ↓
Mars April 15, 2011 at 6:34 am

thanks for your solution to solve my problem 🙂

Reply ↓
Norbert April 15, 2011 at 8:01 am

Hi Anas,

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

Reply ↓
chandan May 4, 2011 at 10:24 am

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. chandan May 4, 2011 at 10:27 am
  
  oopppssss….
  I got it…
  by passing href=javascript:void()
  
  😉 Its cool..
  
  Reply ↓
  1. Anas Nakawa Post authorMay 4, 2011 at 10:29 am
    
    thanks for reminding me about this issue as I haven’t updated this plugin much recently 🙂
2. ermannob May 12, 2011 at 8:12 am
  
  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 ↓
tawboiid May 31, 2011 at 9:03 pm

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 authorJune 1, 2011 at 11:17 am
  
  @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 ↓
tawboiid June 7, 2011 at 5:22 pm

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 authorJune 7, 2011 at 7:05 pm
  @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 June 7, 2011 at 7:52 pm
    
    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!
  2. tawboiid June 7, 2011 at 7:54 pm
    
    Disregard last post. The ASP tags didn’t show in my response.
Breck June 8, 2011 at 2:42 am

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 authorJune 8, 2011 at 6:13 pm
  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 July 21, 2011 at 3:56 pm
    
    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 authorJuly 21, 2011 at 6:23 pm
    
    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
  3. Anas Nakawa Post authorJuly 22, 2011 at 2:50 pm
    
    Svein I think you can now take update, your problem has been solved 😉
Simit Kulkarni June 14, 2011 at 6:52 am

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

Reply ↓
Tisha June 24, 2011 at 7:05 am

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. Sandra July 18, 2011 at 6:37 pm
  
  I’m having the same issue. Any workarounds?
  
  Reply ↓
  1. Anas Nakawa Post authorJuly 21, 2011 at 10:20 am
    
    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
Tisha June 24, 2011 at 7:12 am

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 ↓
carlos July 7, 2011 at 3:42 pm

i get a javascript error on iexplore 8,,, somebody can help me please???
Thanks

Reply ↓
1. Anas Nakawa Post authorJuly 9, 2011 at 8:29 am
  
  @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 ↓
Kashif July 13, 2011 at 6:58 am

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 authorJuly 22, 2011 at 3:33 pm
  @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 ↓
Sandra July 18, 2011 at 5:34 pm

thank you for sharing this. It’s exactly what I was looking for!!!

Reply ↓
GeorgeR July 24, 2011 at 6:05 am

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 authorJuly 24, 2011 at 9:49 am
  @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 ↓
daniel July 25, 2011 at 7:31 am

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 ↓
1. Anas Nakawa Post authorJuly 26, 2011 at 6:23 am
  
  @daniel, I am not sure, but you can give it a try and place it in a master div with 100% height and see how it looks
  
  Reply ↓
Max August 9, 2011 at 9:49 am

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 authorAugust 11, 2011 at 8:14 pm
  
  @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 August 19, 2011 at 6:25 am
    
    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.
Barbara August 11, 2011 at 3:14 pm

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 authorAugust 11, 2011 at 8:16 pm
  @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 ↓
Pingback: JQuery accordion with multiple sections open at once. | wellings.eu
Tom August 28, 2011 at 3:07 am

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 authorAugust 28, 2011 at 7:20 am
  
  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 August 28, 2011 at 6:28 pm
    
    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.
hbrt August 29, 2011 at 9:05 pm

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 ↓
Tristan Sinns September 9, 2011 at 8:34 pm

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 September 10, 2011 at 1:15 am
  
  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 ↓
bramick September 16, 2011 at 7:28 pm

This might be an option for people too: http://jsbin.com/eqape

Reply ↓
David Krauss September 20, 2011 at 6:28 pm

Hi, this is very nice — any idea why the header corners arent rounded in ie8 like they are in Chrome? Thanks!

Reply ↓
1. Anas Nakawa Post authorSeptember 20, 2011 at 6:36 pm
  
  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 September 20, 2011 at 9:00 pm
    
    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!
skeletankMatt Brown October 3, 2011 at 5:30 pm

Bravo! This works great. Thanks a lot.

Reply ↓
scrwtp October 13, 2011 at 2:59 pm

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 ↓
VaN October 19, 2011 at 11:09 am

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 ↓
Tee October 27, 2011 at 4:59 pm

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 ↓
steve November 1, 2011 at 5:52 pm

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 ↓
anjireddy November 15, 2011 at 2:46 pm

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 authorNovember 15, 2011 at 3:06 pm
  
  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 November 16, 2011 at 6:32 am
    
    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”, []);
anjireddy November 16, 2011 at 6:41 am

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 ↓
BZeeB November 21, 2011 at 9:24 pm

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 November 21, 2011 at 9:29 pm
  
  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 ↓
Steve Robertson December 15, 2011 at 4:24 pm

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 January 26, 2012 at 1:55 pm
  
  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 ↓
Boris Batkin January 14, 2012 at 7:26 pm

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 ↓
Brad Guy February 5, 2012 at 12:56 am

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 authorFebruary 9, 2012 at 3:05 pm
  
  @Brad, cookies are not supported, but you can use the jStorage plugin along with this one to store states locally using Local Storgae, and btw it is a cross browser 😉
  
  Reply ↓
  1. Steve Edwards November 11, 2012 at 11:37 pm
    
    Just in case you’ve not seen this yet:
    https://github.com/messuti-edd/jquery-multi-open-accordion
    And, yes, he properly attributes you as the original author. 🙂
    (Now if I can just figure out how to reference the cookies being set…)
  2. Anas Nakawa Post authorNovember 12, 2012 at 4:12 am
    
    we’ll I have seen it before, but did not know that he attributes me!
    
    thanks anyway 🙂
    
    unfortunately i haven’t used cookies before, and i suggest that you try out local storage instead using jStorage jQuery plugin http://www.jstorage.info/
Bill Mohler February 9, 2012 at 12:16 am

When I looked at your demo using IE8 & 9 the accordion doesn’t seem to work. The accordion loads, but doesn’t work.

Reply ↓
1. Anas Nakawa Post authorFebruary 9, 2012 at 2:33 pm
  
  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 ↓
kim February 19, 2012 at 3:43 pm

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 ↓
1. Anas Nakawa Post authorFebruary 20, 2012 at 6:45 am
  
  @kim, you might be looking for the regular accordion jQuery UI accordion, http://jqueryui.com/demos/accordion/
  the whole idea behind my ‘multi open accordion’ is to extend jQuery UI regular accordion to enable more than one section be opened at a time.
  
  Reply ↓
Majsterka February 20, 2012 at 1:53 pm

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 ↓
1. Anas Nakawa Post authorFebruary 21, 2012 at 5:29 am
  
  it is based on jQuery UI Framework, you can download any theme you like from http://jqueryui.com/themeroller/ and just include its css in your project
  
  Reply ↓
Darryn February 23, 2012 at 3:49 am

Works great! Thanks for this.

Reply ↓
Ravi March 5, 2012 at 9:48 am

How to change Backgrould color of the Accordion content. ?

Reply ↓
1. Anas Nakawa Post authorMarch 5, 2012 at 10:05 am
  
  @gadagrj, you can create your own theme from here, then download the new theme and replace it with the current theme in the css folder.
  
  Reply ↓
Tom March 9, 2012 at 12:27 am

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 ↓
Sled March 9, 2012 at 5:06 am

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

Reply ↓
1. Sled March 9, 2012 at 10:46 pm
  
  Nevermind, figured it out. Easy peasy. Thanks again!
  
  Reply ↓
Tom March 10, 2012 at 12:48 pm

Sled – can you share what you did? I need to do the same. Thanks.

Reply ↓
1. Anas Nakawa Post authorMarch 10, 2012 at 1:14 pm
  
  @Tom, check this fiddle http://jsfiddle.net/anasnakawa/du9EM/2/
  
  Reply ↓
2. Sled March 10, 2012 at 3:06 pm
  
  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 ↓
Tom March 10, 2012 at 1:23 pm

Thanks Anas. I appreciate your help.

Reply ↓
Tom March 10, 2012 at 8:21 pm

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 ↓
Wolf March 12, 2012 at 7:09 pm

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 ↓
1. Anas Nakawa Post authorMarch 12, 2012 at 7:19 pm
  
  @Wolf, unfortunately, you cannot do that using tab ids 😦
  
  Reply ↓
Mark March 14, 2012 at 1:54 pm

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 ↓
schwann March 15, 2012 at 10:56 pm

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 March 15, 2012 at 11:11 pm
  
  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 ↓
Sled March 16, 2012 at 2:03 am

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 ↓
Larry Ashkenas March 22, 2012 at 10:49 pm

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 ↓
doug April 7, 2012 at 3:38 pm

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 ↓
Jeff April 19, 2012 at 2:43 pm

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 ↓
Jeff April 19, 2012 at 2:46 pm

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 ↓
shailesh April 22, 2012 at 12:02 pm

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 ↓
Dan May 2, 2012 at 4:40 pm

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 ↓
Dan May 3, 2012 at 7:30 pm

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 ↓
Dan May 13, 2012 at 5:29 am

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. Anas Nakawa Post authorMay 13, 2012 at 5:37 am
  
  Hello @Dan, I think you are missing the reference to jQuery UI js file,
  
  try it and let me know 😉
  
  Reply ↓
  1. Dan May 13, 2012 at 5:47 am
    
    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. Anas Nakawa Post authorMay 13, 2012 at 5:54 am
    
    would you please provide me with a http://jsfiddle.net/ example so i can help you ?
    
    Thanks
  3. Dan May 13, 2012 at 7:00 am
    
    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.
  4. Anas Nakawa Post authorMay 13, 2012 at 7:02 am
    
    Glad you’v managed to solve the problem 🙂
  5. Dan May 13, 2012 at 7:50 am
    
    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/
  6. Anas Nakawa Post authorMay 13, 2012 at 8:19 am
    
    @Dan, check this one,
    you have to load my plugin ‘jquery.multi-accordion-1.5.3.js’ after loading jquery ui js file, you also need to include jquery ui css file,
    http://jsfiddle.net/VH2Bx/
  7. Dan May 13, 2012 at 8:31 am
    
    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!!!!!
Dimitri July 2, 2012 at 1:42 pm

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 ↓
Muhil July 3, 2012 at 11:39 am

@DAN: Umm there is a simple enough fix

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

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

cheers 🙂 🙂

Reply ↓
caturday July 23, 2012 at 8:22 am

can this accordion combine with sortable? because I ever try and it not works properly 🙂

Reply ↓
cupidvogel August 6, 2012 at 12:03 pm

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 ↓
amergin August 22, 2012 at 12:50 pm

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. Anas Nakawa Post authorAugust 23, 2012 at 4:26 am
  
  unfortunately not 😦
  
  Reply ↓
2. Jeff August 23, 2012 at 2:54 pm
  
  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 ↓
Vladimir September 3, 2012 at 10:23 am

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 October 7, 2012 at 12:24 am
  
  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 ↓
Tim December 4, 2012 at 7:55 pm

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 ↓
Pingback: extend jquery accordian plugin - feed99
Pingback: How to extend the jQuery accordion plugin - feed99
Randall Sexton January 15, 2013 at 5:34 pm

This is awesome. Thank you so much!

Reply ↓
Ranjith February 16, 2013 at 9:24 am

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 ↓
Wildan Muhlis February 28, 2013 at 12:00 am

Thanks, Useful Plug In 😀

Reply ↓
Houssam March 22, 2013 at 5:19 pm

Works like a charm. Saved me a few hours of work!!
Thank you!

Reply ↓
Arunsri April 15, 2013 at 12:27 pm

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 ↓
Vijay Karan Singh April 17, 2013 at 9:42 am

Thanks a lotttt….!!!!! 🙂
Solved My problem..

Reply ↓
cool May 14, 2013 at 9:27 pm

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 ↓
itilk October 9, 2013 at 6:16 pm

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 ↓
1. Anas Nakawa Post authorOctober 9, 2013 at 7:48 pm
  
  This plugin is no longer in active development.
  
  Reply ↓