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

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

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

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

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!

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:
http://bubbling-library.com/sandbox/accordion/inject.html

Hi,

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

cleanup:function(){
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 ] );
}
}
}

Hi,

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,

Rob

@Rob:

Here is an example:
http://bubbling-library.com/sandbox/bubbling/accordion/ajax.html

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.

Hi,

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,

Rob

Hi

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

Thanks

Bill

@Rob,

Here is an example of how to handle that:

http://bubbling-library.com/sandbox/accordion/nested.html

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.

@Bill:

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.

@Caridy

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{
display:none;
}
But Some how it is not working as excepted ...

Do you have any idea about this one ..

Thanks

Venu

Hi

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

Thanks

Bill

Hi

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

Thanks

David