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

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

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

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.

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

Bookmarks

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

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:

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

But anyway, here is the code:

YAHOO.util.Dom.setStyle(el,"height",el.scrollHeight+"px");

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.

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!

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.

Hi,

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?

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.

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
YAHOO.util.Dom.setStyle(el,"height",el.scrollHeight+"px");

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

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?

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

Hi,

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.

Hello!

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.

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?

@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:
onLoad=\"javascript:YAHOO.widget.AccordionManager.expand(\'newAppAccordion\');

You should use this:
YAHOO.util.Event.onDOMReady(function () {
YAHOO.widget.AccordionManager.expand('newAppAccordion');
});

Hi,

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

Hi,
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;
myAnim.animate();
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 ?

Thanks,
Akshay.

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

@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:

http://bubbling-library.com/sandbox/misc/accordion-prototype.html

This fix will be officially release with 2.2, but in the meantime you can download the code from github:
http://github.com/caridy/bubbling-library/tree/c4ccba7341e7b4a5dbe52d662cc38301be997140/build/accordion

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

Thanks in advance

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

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,
Caridy

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?

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

Isaac

Doesn't work on IE7 version 7.0.5730.13

Hello,

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?

Thanks.

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,
Caridy

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

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:

http://github.com/caridy/bubbling-library/blob/master/build/accordion/accordion.js

Thanks!

Hi,

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

Hi

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

@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:

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

Best Regards,
Caridy

@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,
Caridy

Hi
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