Styling according headers

I thought I had seen documentation on how to style the according headers but I am not seeing that documentation.
I would like to use CSS similar to jquery UI where I have an “Active” panel.
Thanks
Jennifer

Dear Jennifer,

Do you mean an accordion container, am I right?

You can add the CSS class to the accordion card and header with the help of this code:

$(fd.container(‘Accordion0’).$children[0].$el).addClass();
$(fd.container(‘Accordion0’).$children[0].$el).find(“a”).addClass();

A documentation on Accordion: https://plumsail.com/docs/forms/javascript/containers.html#accordion-panels

I want to change the header and body so users can tell which one is active, similar to jquery ui themes

hi Alex, can you help me to solve this issue. Thanks in advance.
This is the link How to Enable or Disable Section in the Form?

Dear Farah,

I’ve replied to you in your topic.

Dear Jennifer,

I’m sorry for a late response.

Could you please clarify what changes you want to be implemented in the accordion container style? Concerning JQuery UI accordion widget, the styles are pretty much the same - the inactive panel is darkened, the active panel is lightened.

As you said I want to change the white and light grey color of the active and inactive panel. If you look at my screen shot there is no major difference at all between active/inactive panels I would like to make the active header be blue or something so that is is completely obvious. Currently I have no CSS in the form.
Respectfully
Jennifer

Dear Jennifer,

Something like this?

image

a.nav-link.active {
    background-color: #0078d4 !important;
    color: white !important;
}

“background-color” adjusts header color, “color” adjusts header text color.

Exactly thank you so much!

Hi @AlexZver

I am applying the same css on my accordion control but i am getting different results. Kindly view the attach screenshots I want to change the header color not the fields one.

Dear Ramiz,
Where exactly are you placing the code? It should go to CSS editor, not to Style property:
image

1 Like

Yeah it worked. Thank you so much for the help.