Montag, Mai 14, 2007

Accordion menu

I added another visual effect for HTML that is called an accordion menu by using a JavaScript Behavior.

An accordion menu is a collection of multiple, stacked panels.

Only one of them is visible and another can be opened by clicking the header of a closed one using a smooth transition of the heights of the content area of the panels.

Have a look at:


Anonym hat gesagt…

First of all I would like to say your website is great.

Have you noticed that only one Accordion control will work per page. Is there a resolution for this problem?


MatHertel hat gesagt…

I've added a second accordion to the page just below the first one to show how to use 2 accordions.
The second accorion needs another (unique) id and a second line that loads the behavior to the second accordion.
Have a look at the source code of the page.

Anonym hat gesagt…

This component is works very well. Is there a way to maintain the open panel through postbacks?


MatHertel hat gesagt…

Thanks, that's a great question !

Persisting the state of the accordion can be done without any big changes.
1. the accordion is placesd inside a form (I think you did that already).

2. Add a hidden field to the source as a firstChild to save the number of the current open area:

<form runat="server">
<div id="themenu" class="VEACCORDION"><asp:HiddenField runat=server/>
<div class="VEACCORDIONHEADER"%gt;
The accordion menu</div>

3. when a area is opened the number must be saved to the field.
4. when the accordion is loaded the field is read and the appropriate area is shown.

You can find the extended behavior online:

I put the OpenAjax event integration onmy todo list, because I think this can be done in a more systematic way than adding post-back support to the individual controls.

Stay connected...

Anonym hat gesagt…

A really nice work of coding. But I have noticed one issue which exists - of all places - with Firefox (v2 or 3). If the accordion is folding from a content div which has an extensive amount of content (and I DO mean extensive) to another content the content folds upward to hide the current content (on the exchange with the newly selected content div), the content, window, etc. experiences a type of shuddering fX.

I would love to share my URL with you, but unfortunately, behind the iron curtain of a development wall, I am unable to...that is, unless we go Live with this. But with Firefox working like it is, I doubt it will pass testing. :-(

The only way that you could test what I am saying is to (perhaps) load an inordinate amount of Lorem ipsum text in several content divs and test for yourself.

But for fewer lines of works fantastic. And does, in any case, for IE6/7.

Anyone else experience this phenomenon?


MatHertel hat gesagt…

The flickering is caused by a specific behavior of firefox when resiziong a web site.
If the accordion is the highest element the page height depends on it. The following happens when the bottom of the page is in view:
1. when opening another panel the size of the page changes.
2. Firefox draws this state.
3. Firefox detects that there is some space left at the bottom of the page and automatically scrolls up some pixels.
4. Firefox again draws this state.

In Internet explorer the step 2 is not executed and the flickering is avoided.

This all happens very quick and I hope I analyzed it right. I expect that any other accordion has the same effects in this situation.
The workaround I see: give your page a fixed layout with a fixed height.

Anonym hat gesagt…

Excellent explanation. But in my particular situation, setting the slider's ID height to (e.g.) 3000px wouldn't work. The majority of our content needs the ability to adjust as necessary for results, etc.

Hm-m-m-m...well; although I LOVE this effect, is it possible to simply have the accordion snap open and closed onClick? I had adjusted the's Math.min value to 100 in order to have the accordion move quicker...which it did. But I am wondering if it is possible to have the accordion snap open or close onClick. Is it possible? 'Cos I am thinking this would negate the shudder effect altogether.

If I can perfect this, I'd love to share with you the finished project, should it pass testing.

Regards...David Carriger.