Highlighting active acordion

Suite and Optimus Suite 5
#1

How do I make the active accordion header highlight to show thats the active “slide”?

#2

It works on mouse over fine. But how do I make it stick once its selected?

#3

Unfortunately, there is not a method to highlight (change background color) the header of a certain accordion cell. You may set onActive event handler and change the text (you may place html element with a color style property as text) of an active and previous active cells:

accordion.attachEvent(“onActive”,function(id){
/your code here/
})

The label can be set by setText method.

#4

Okay I figured it out with the help of jQuery. I hope this helps others.

To highlight the selected accordion header use the following:

	        dhxAccord.attachEvent("onActive", function(id, state){
		        if (state) {
		        	$('div[id^="dhxAccordionObj"] > div').eq(id.slice(-1)-1).find('div.dhx_acc_item_label').css('background-color', '#FF9900');  //highlighted/active color
		        }
		        if (!state) {
		        	$('div[id^="dhxAccordionObj"] > div').eq(id.slice(-1)-1).find('div.dhx_acc_item_label').css('background-color', '#B3B3B3');  //deselected/inactive color
				 }
		    });