YUI Widget: Accordion Manager - Documentation


See the API Docs at full screen in a new window:



incomplete information

Plz can you provide the Accordion Manager documentation b cause the link doesn't work on the site

Comment by hero789 - May 22, 2008

Re: incomplete information

Unfortunately, there is not documentation for the accordion component
yet, your best bet is to dig into the examples code, I just tried to
put as much comments as possible into the examples pages.

I don't know exactly when I will be able to publish the full

Comment by Caridy - June 11, 2008

Accordion with DataTable

There seems to be an issue with the accordionManager in IE. if the contents contain a DataTable: The DataTable headings overflow improperly over any contents above the accordion. Thanks

Comment by Daniel - June 23, 2008

Center Accordion

How do you center the Accordion in a div or grid?

Comment by Jeff - October 17, 2008

More info

How can I find out more about the options available for the accordion script? Also, how can I make each accordion toggle to different heights? This is a smashing extension to YUI, well done!

Comment by Bassu - March 25, 2009

RE: More info

Hey Bassu, unfortunately we don't have the official documentation in place for this widget. The best bid are the examples. You can email us if you want to know about an specific option, or a new feature.

About the height/width of the elements, depends on the css definition. As you can see there is not initialization code, which means that the JS code will work with the markup and css definitions to change the state of the elements. Usually if you want fixed height/width, you can use the "fix" class to define those fixed values along with overflow: hidden or scroll. If you want liquid layouts, then you can set those hight/width to auto. Here is an example of liquid height:

Comment by Caridy - March 25, 2009

Cleaning up accordians


Here's a little function to clean up accordians. I have an app that doesn't do many page refreshes, so I need to keep track of my Dom and memory use. When I 'load a new page' (using dispatcher!) I run this (along with others) to tidy things up. Thought it might be of interest...

var accEls = YAHOO.util.Dom.getElementsByClassName( "yui-cms-accordion" );
if( accEls.length > 0 ){
for( var i = 0; i < accEls.length; i++ ){
YAHOO.widget.AccordionManager.remove( accEls[ i ] );

Comment by Matt - July 29, 2009

AJAX Accordian


I'm looking to use teh accordians with AJAX to retrieve the data, i've looked at your example but i can't see how in the code you have hooked an ajax request via the dispatcher to the click-to-expand event of the accoridan. I've tried addign onClick myself but it gets ignored as the sliding to open event seems to replace it. Do you have any advice or guidence. Much appreciated,


Comment by Rob - August 27, 2009

RE: AJAX Accordian


Here is an example:

Accordion Widget has a built-in integration with Dispatcher for AJAX requests. This solution is based on the trigger element (), and it will use the string defined after the #, to load the content using AJAX.

Anyway, implementing a custom AJAX trigger is ready easy. You can check the code within accordion.js, line 55, that's the block, and you can re-use it outside of that script, creating a custom experience.

Comment by Caridy - August 27, 2009

resizing accordions


Thanks for your previous reply, i have hit a new issue which i hope you can help with. I have an accordion which i have placed a YUI treeView control within, my problem is todo with resizing. I can subscribe to the expand / collapse of the tree control but how can i tell the accordion to grow / shrink to use the space it needs for the tree without collapsing and expanding it. Is there an event i can fire.

IMany thanks for all your help,


Comment by Rob - September 3, 2009

Collapsable and Expandable YUI Panels


Thanks for providing wonderful library ..

i am using Collapsable and Expandable YUI Panels ..

When i expand the panel .... I like to set the height to 300 px...

But It is taking height based on content of the panel ..

I like to set it to default size as 300 px ..

Could any one help me ..



Comment by Bill - September 15, 2009

RE: resizing accordions


Here is an example of how to handle that:


As you can see, when you click on the element PHOTOS (nested) you will see another accordion there, and if you click in the Photos 3 element in the nested accordion, you will see how it actually expand the container to fulfill its area. The code is fairly simple:

YAHOO.Bubbling.on('accordionOpenItem', function (layer, args) {
YAHOO.util.Dom.setStyle(args[1].slide, 'height', '100%');

This method will restore the height to 100% after each element get expanded, which means that after the expanding the content of the Item can change, and it will be expanded as well in order to display the whole content.

Comment by Caridy - September 15, 2009

RE: Collapsable and Expandable YUI Panels


Thanks for the kind words.

About the fixed height, normally, the trick is the use a wildcard container to fix the size of the container element. If you check most of the examples, I use this a lot:

... the content of the panel here ...

So, the animation process will be applied to "bd", but the desired size will be calculated based on it's offsetHeight value. And this value is subject to the size of the child elements, in this case "fixed". If fixed was defined as this:

#mypanel .bd .fixed {
height: 300px;
overflow-y: scroll;

Then the desired offsetHeight of "bd" will be "300px". Which exactly that you need. :-)

Note: keep in mind that the padding/margin between bd and fixed should be 0, otherwise you will see an space between them.

Comment by Caridy - September 15, 2009

position:relative; yui-overlay-hidden is not working


Thanks for your quick response ...

It is working fine ...

And I am having one more problem with replacing the Positions Of the Panels ...

I am having 4 panels ...

If i close the top panel ...Bottom Panel Should replace the Position of the Top Panel ...

I am using position:relative and nested grids to arrange the number of Panels ...

For This one I am using the .yui-skin-sam .yui-overlay-hidden{
But Some how it is not working as excepted ...

Do you have any idea about this one ..



Comment by bill78b - September 15, 2009

accordion.js problem


In my application i am using accordion.js for Collapsable and Expandable YUI Panels ..

But When i include this File in to my JSP FIle ...

My Application layout is completely changing ...

Can i get the specific JS Function for Collapsable and Expandable YUI Panels .. ... So that i can copy that function in my jsp File ...

It is high Priority Issue for me ..

Could Some one help me..



Comment by bill - September 15, 2009

new icon in yui panel


I am working on YUI Panels ... I like to have the minimize and maximize functionallity for yui Panels ...

How can i put the new icon after the close icon of the YUI Panel ..



Comment by David - September 17, 2009
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!