PDA

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



mayka
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
headers[expandedindex].style.backgroundColor='black'
headers[expandedindex].style.color='white'
}
}

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

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


ddaccordion.init({
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.

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

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

ddadmin
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