Accordion menu Flicker

[JeffSinNHUSA]

1) Title: Flicker on load of accordion menu

2) Script URL: http://www.dynamicdrive.com/dynamici...ordionmenu.htm

3) Describe problem:


Every time an option is clicked on the left menu, the accordion expands, navigates to next page, then the menu flickers.

Example URL: http://www.l-com.com

Click on any entry in the left menu

Thanks!

Jeff

ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='/Images/plus.gif' class='statusicon' />", "<img src='/Images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}

[jscheuer1]

I see no flicker. It does switch to the new page - a process which in itself often but not always makes the entire screen go blank. Once the new page loads, the accordion expands the previously selected. I see no problem in that. It's how the script is designed to work.

If you want some other behavior, you would need a different script. Or at least use this script differently. Perhaps instead of relying upon persistence (cookie), set that to false:

 . . .
 animatedefault: false, //Should contents open by default be animated into view?
 persiststate: false, //persist state of opened contents within browser session?
 toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
 togglehtml: ["suffix", "<img src='/Images/plus.gif' class='statusicon' />", "<img src='/Images/minus.gif' class='statusicon' />"], //A
 . . .

and use the url parameter method instead. Example:

<a href="current.htm?expandable=0">Expand 1st header within "expandable" header group</a>

where expandable is the header class for that accordion and 0 is the zero based index of which content to expand, like:

<a class="menuitem submenuheader" href="/productcenter.aspx?ID=2005&submenuheader=1">Antennas</a><div class="submenu"><ul>

But the page is still going to load (possibly go blank), and the accordion will still have to expand. so it might not change much if anything.

The only other thing I can think of would be to use a different script, or perhaps another script along with accordion. Instead of reloading the page, use AJAX to load the new content into the product area. Or, instead of using a cookie or url param to get the script to tell accordion what to expand, use a url param to tell PHP (or whatever server side language you're using there) which to make the default expanded.

[JeffSinNHUSA]

Hi John,

Thanks for the reply!

Jeff