View Full Version : How higlight opened submenu item in Accordion Script

11-26-2012, 09:50 AM
1) Script Title: Accordion Content script (v2.0)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) Describe problem:
Its my first post so Hi for everyone ;)
I have small problem with this script..

How can J change color of active (selected from menu and displayed) item ? Something like this:

oninit:function(headers, expandedindices){ //custom code to run when headers have initialized
for (var i=0; i<expandedindices.length; i++){
var expandedindex=expandedindices[i] //index of current expanded header index within array

but with a actual tab,not with header, anyone can help ?

11-29-2012, 11:22 AM
Hmm if you simply mean style the currently expanded header, you can do this already by making sure the options in red below inside your initialization code are defined:

headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //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: false, //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?
scrolltoheader: false, //scroll to header each time after it's been expanded by the user?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["closedheader", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' style='width:13px; height:13px' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' style='width:13px; height:13px' /> "], //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(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

With toggleclass set to two arbitrary CSS classes (ie: "closedheader" and "openheader"), you can simply style these two classes as desired inside your CSS, which will be applied to each header when they are contracted or expanded, respectively.

11-29-2012, 11:32 AM
Its works, thank You :)

12-04-2012, 09:23 AM
J have another question, about this menu, can J change style active (open page from this menu) submenu item ? Because this style change currently expanded header items, but J want to do something like in wordpress menu, when page is open menu change color and add > .

12-06-2012, 07:12 PM
If you're talking about affecting the style of an expanded header's sub contents somehow, you can do this using the oninit() and onopenclose() event handlers of the script. The exact steps though depends on what you're trying to do (your description above is a bit vague). See here: http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment2.htm