YUI Widget: Accordion Manager - Examples


See the examples in a new window:

New Window   /sandbox/bubbling/accordion/index.html



the icons of the nested menu inherits it's parents state. you should add a class for "deselected".

Comment by stefan - August 7, 2008

RE: icons

Hi stefan, thanks for the feedbacks, we will solve this issue with the next release 2.0.0.

Comment by Caridy Patino - August 10, 2008


Too bad, the Accordion manager does not work in IE7 and is therefore a show stopper for us....
Another 'Firefox only" nice but useless piece of code.
Please fix it.

Comment by Jacques - September 23, 2008

RE: Accordion

Could you please send me the specific example that didn't works? also your IE 7 version, I mean the exact version. All the component were tested on IE 6/7, and only the vertical accordion have some issues, but anyway, you send us the link, and we will fix it for you... The accordion plugin have a configuration argument, called fixIE, which is a class, that should solve all the problems with IE.

Comment by Caridy - September 23, 2008

Accordian and IE

I seem to have 1 issue with IE. I have a collapsable/expandable item that I dynamically insert other divs into for menu items.



The code above is for the item collapsable/expandable container and I dynamically insert divs into "bookmarkPane". An example div is:

Comment by Ryan - October 14, 2008

RE: Accordian and IE

Hey Ryan,

There is an example to integrate the accordion with the YUI Connection Manager to load the content of the element when it get expanded:


But anyway, here is the code:


and "el" is a reference to the "bd" element (which is the expandable / collapsible element).

P.S.: let me know if you need more help with this.

Comment by Caridy - October 14, 2008

Hidden Left Panel (Accordion Menu) (open on click)

Hypothetically, could a web app allow the following?

1. Create a new Hidden Panel (Accordion Menu) (open on click);

2. Drag (move) it somewhere on the page;

3. When it's positioned where the user wants it to be, "anchor" it there so it moves with the page as it scrolls up or down;

4. And the accordion contains a textarea for notes?

Thank you very much for this wonderful library!

Comment by Jim - January 14, 2009

RE: Hidden Left Panel (Accordion Menu) (open on click)

Hey Jim:

You can do it. You have to use YUI Drag And Drop Utility for that. There are no implications if you remove the markup (html) for a particular accordion, and move it to another part in the DOM, because the accordion do not set any listener, so no memory leaks or lost reference.

The last example (Accordion Panels: Using Drag and Drop to reorder the items: http://bubbling-library.com/sandbox/accordion/dragdrop-panels.html)
implements something similar: 3 docks, and you can drop the accordions elements in these docks.

Comment by Caridy - January 15, 2009

prototype.js and accordion


When I add the prototype js frameword file with the accordion.js file, the accordion doesn't close on IE. It works fine on Firefox.
It opens properly on IE, but just doesn't close.

Any idea what I might be able to do to fix this problem?

Comment by DJ - February 25, 2009

Accordion Issues

Hi Caridy.

Great work on the bubbling library! It makes life a lot easier. Hope you can help, this is driving me mad...

Question: Is there a way to re-render an open accordion? I didn't see a public method to do so and I ask because I have the following problem:

* YUI build 2.6.0
* Bubbling Library build 2.0 (using Dispatcher and AccordionManager)

I have a YUI DataTable at the top of my page above a closed accordion. I have a link in the first column of the DataTable that, when clicked, does the following:

1. Uses your Dispatcher plugin to fetch some information for display in an accordion element
2. Opens the corresponding accordion element

The element opens but does not display the fetched data UNLESS I close the accordion and open it again (manually, not programmatically unless I call toggle and click the link three times). This problem also happens when I have a DataTable inside an accordion and let the user pick the number of rows to display - if the number of rows extends beyond the height of the accordion, the rows appear but the accordion cuts them off UNLESS I close and re-open the accordion. Only then does the accordion know to change its height.

How do we let the accordion know that it needs to be re-rendered or refreshed? Your AJAX example in the comments above is using Bubbling 1.5.0 with YUI 2.5.1.

Thanks again for your hard work - it is definitely saving me time.

Comment by Mike - March 16, 2009

Re: Accordion Issues

The solution is simple:

// el is a dom reference to the bd element for an accordion item
// you can open the item here, and probably set the body to: loading, please wait...
// now using the dispatcher to load the content...
YAHOO.plugin.Dispatcher.fetch ( el, url, {
onLoad: function (el) {
// forcing the accordion item to expand to the correct height when the content is loaded using ajax

// OR apply the animation instead to apply the height/width directly


I didn't test it, but it should works. If not, just ping me, and I will create an example for you.

Comment by Caridy - March 17, 2009

Re: Accordion Issues

I've integrated a YUI datatable under the Accordion and it works fine under FireFox, but IE doesn't open it up properly. I saw your comment above, but I'm not certain how to integrate that. Can you give an example?

Comment by Paul Cobb - April 29, 2009

Re: Re: Accordion Issues

@Paul Cobb,

Well, I have two recommendations for you:

1. If you want to use AJAX to load the content of the item dynamically, then you have to resize the "bd" of the item after the render process for the datatable.

2. if the information is static information, you should try to renderer the datatable before setting up the styles for the elements, and keep in mind that the bd should have position: relative; to avoid weird behavior on IE.

You can contact me directly, and I will try to help you.

Comment by Caridy - May 13, 2009

Accordion Issues


I have the same problem as DJ. I have a jsp page with prototype js, yui 2.7 datatable out of accordion menu, and a accordion menu at the top of the page...the problem is that the accordion doesn't close on IE. It works fine on Firefox.

Thank´s a lot.

Comment by David - May 19, 2009



Big fan of expanding the YUI library, and a big fan of the particular items that you have built! I did also notice though that going to this page in IE7, the accordions don't expand, either on roll-over or click actually. I was just about to download it and use it! IE7 version 7.0.5730.

Hope that helps! Thanks for sharing your hard work.

Comment by ben - June 2, 2009

More IE issues

I want to have my accordion expanded completely upon loading the page. Thought i had it working by having an "onLoad" call on my body tag:

Worked great in Firefox 3.0, but not in IE6. Adding that statement not only doesn't work in IE but it appears to bugger up the accordion entirely.

As a side note, the "open all/collapse all" links work fine in either browser, so I'm at a loss.

Any suggestions?

Comment by Doug - June 18, 2009


@Ben: I don't know how I missed this message. I will try the accordion with that particular IE version and I will be back to you.

About the other issue, usually there are few problems with the "onLoad" event in IE, and my recommendations is to use YUI onDOMReady.

So, instead of using this:

You should use this:
YAHOO.util.Event.onDOMReady(function () {

Comment by Caridy - June 18, 2009

This doesn\'t work in IE 6


I'm viewing this page in IE 6, and the expand/collapse doesn't work at all in IE 6. I'm using 6.0.2800.1106.... on Windows Xp with SP2

FF works - of course - fine....

Comment by Christian Sonne Jensen - June 22, 2009

YUI Panel

This library is really awesome work. Thanks for all your hardwork.

There was an issue with the collapse option when its applied to yui panels. When you set the height for the panel in the properties the only the div with class 'bd' scrolls up leaving the parent element still visible.
The issue would be same if you resize the panel.

I added an extra animation to open and close the panel.
I added this code in _openItem and _closeItem
var myAnim = new YAHOO.util.Anim(item.el.id, at);
myAnim.duration = list.timer;
myAnim.method = YAHOO.util.Easing.easeOut;
where the values for at is set diff for open and close (height: to: 0 for close and the other way for open).

Is there a better way to solve this problem ?


Comment by Akshay - June 23, 2009

Re: prototype.js and accordion

The collision is in clear function inside the extending of Array, I remark it and all work fine for me.

Comment by Ishai Borovoy - August 5, 2009

Re: prototype.js and accordion

@david and @DJ: thanks for reporting the issue.

@Ishai: thanks for figure out the issue with prototype JS. I just solved the problem. Here is the DEMO:


This fix will be officially release with 2.2, but in the meantime you can download the code from github:

Comment by Caridy - August 5, 2009


I wanted to know if you have any examples of vertical accordions that have horizontal accordians within them.

Thanks in advance

Comment by Amit - August 12, 2009

Re: help

@Amit: at the moment there is not an example to show that kind of interation, but should be really easy to implement.

Check these two examples:

The merging process should be easy. The complexity is in the CSS definition. If you need help with that, just contact me directly and I will try to help you.

Best Regards,

Comment by Caridy - August 12, 2009

IE Visual Artifacts

When I use the accordion on IE7 or IE8 and the accordion panel has a yui menu button on it, expanding and collapsing the panel causes visual arttifacts on the screen. I do have the fixIE style set.

Any ideas?

Comment by Jason Southwell - September 16, 2009

Help with YUI Dispatcher Plugin - Loading Child TabViews

I just came across your Bubbling JavaScript Library which is amazing! I have been using the YUI TabView for a while and have long tried to load a TabView inside another TabView with no luck until I found your library on the Internet.

Using your dispatcher add in (Dispatcher.js), I am able to load a child TabView but after that I cannot click on the main tabs anymore! What do I need to do to access the main tabs AFTER loading a child TabView?

You can see an example here (http://www.myshbp.com/demo.html). The child TabView is associated with the main tab “Tasks”. But after you click on Tasks, you cannot click the other tabs (Description, Rules, etc) anymore.

Your help is very much appreciated.


Comment by Isac Tabe - October 10, 2009

IE 7 no go

Doesn't work on IE7 version 7.0.5730.13

Comment by Phil - October 13, 2009

O3D objects don\'t collapse


I really like this nice library. However it seems it does not collapse O3D objects (the O3D plugin from Google allows 3D graphics on the web), since the O3D object stands above the collapsed panel. Can I expect O3D compatibility soon?


Comment by Eric - February 16, 2010

RE: O3D objects do not collapse

Hey Eric,

O3D is a plugin. Normally, we do not test widgets with browser plugins. In the case of flash, it supports wmode to solve the problem during the interaction with HTML elements, working with the browser stack. I'm not so sure this plugin does. But I will try to find a solution.

The workaround for this can be: destroying the element before collapsing the item. Then restoring the element after expanding the element. That will fix the problem today, and the accordion manager provides the corresponding hooks to do that.

Best Regards,

Comment by Caridy - February 18, 2010

RE: O3D objects do not collapse

Thanks for your fast answer. Just to say the issue I described only happens in Firefox. In IE it works well.

Comment by Eric - February 18, 2010

prototype + accordion

Thanks for the library and for the solution of the prototype issue.

Just a comment: The correct URL of the 2.2 javascript file is this one:



Comment by Esteban C. - March 11, 2010

Adding Dynamic Elements


Great tool thanks - is there a reason why you haven't included the ability to add() new elements?

Comment by Alan - April 1, 2010

Accordion and forms


Can you please tell me if you can use an accordion in conjunction with a form that has separate sections divided by fieldsets with a submit button in the last fieldset.

Thank you

Comment by Jean - April 13, 2010

RE: Adding Dynamic Elements

@Alan: you can add new elements, but not thru the accordion manager plugin. This component controls the actions not the markup, which means that you can modify the markup manually, and it will catch up new elements automatically. Here is an example:


Best Regards,

Comment by Caridy - April 17, 2010

RE: Accordion and forms

@Jean: You can use any HTML element within an accordion item. An item is just a block element (DIV), which means that it can contain whatever you want. There are some situations in which some browsers react a little bit odd, but normally if you apply the relative position (position: relative; in your CSS for the container element) you should be ok. Are you having any problem? can you send me a link so I can take a look?

Best Regards,

Comment by Caridy - April 17, 2010

Datatables in Accordian

I have datatables in each accordian and I am facing problems.Let me explain what I doing.
1) I am injecting accordian dynamically with following code.
function injectAccordianItem(_header, divId){

var accItem = ''+_header+'';
accItem += '';
accItem += ' ';

YAHOO.util.Dom.get('editor-accordion').innerHTML += accItem;

2). I have a method which creates table for div id that is injected in above method.

Problems are -
1) For each table I am declaring paginator, but it only appears for last table in last accordian.
2) And eventHandlers attached to each table works only for last table.
I am not what blunders are happening from my side. I am not where I am making mistakes.

I need urgent help. Thanks
Pankaj Mittal

Comment by Pankaj Mittal - May 3, 2010
Bubbling for YUI 3.x

Dispatcher (gallery-dispatcher)
The Dispatcher satisfies a very common need of developers using the YUI library: dynamic execution of Ajax response content. (new)

Node Accordion (gallery-node-accordion)
The Accordion Node Plugin makes it easy to transform existing markup into an accordion element with expandable and collapsible elements. Elements are easy to customize, and only require a small set of dependencies. (new)

Event Binder (gallery-event-binder)
Binding user actions until a particular YUI instance become ready, and the listeners defined before flushing those events through a queue. This will help to catch some early user interactions due the on-demand nature of YUI 3. (new)

Preload (gallery-preload)
Port of Stoyan Stefanov's JavaScript preload() function. It also has built-in support for Timer Idle to preload files only when the user is idle to avoid any overhead during the initial loading process. (new)

Parent Window Utility (gallery-parent-window)
This utility provides a set of functionalities to interact with the parent window. (new)

- See more modules by Caridy.

Bubbling Library is free open source software under the BSD License

(c) 2006 - 2010 Caridy Patino. All Rights Reserved.

This is one of my side projects, if you need something, just ask!