Forums

Hi! I would like to style the sliders (headers/titles) in a form differently for 'active' (open) sliders and 'inactive' (closed) sliders. But the closed and open sliders do not seem ta have a class I can target with CSS. Is there a different approach I could use?

The idea is to have a little arrow-down icon on a slider header that is closed and an arrow-up icon on the open slider.

Kind regards, Jip

Hi Jip,

Without hacking the core code you can probably do this with JavaScript.

Using jQuery you can grab all the <h4> <a> tags inside the parent div.panel_group; you can add an onClick function to these to trigger a function that will change the styling.

To do that, once you have the <a> elements you can check the href value for each which will give you the ids of the slider panels. Check the display setting of each of these for block/none then use the jQuery .parent() method to go up a couple of <div>s to find the heading and add the style.

Not completely straightforward but I think it can be done.

Bob

OK, thanks! I'll give it a try.
It would make live easier for us if CF could add an 'active' class to the active slider ;-) Maybe in the future....
Kind regards,
Jip.