Accordian Header hover vs active

[Justinbouck]

Hello, I am working with the Pro theme and implementing the accordian element. I am not having any issues yet other than I would like the ACTIVE color to be different that the HOVER color. Currently, the Interactive attribute assigns the color to both hover AND ACTIVE.

Is there a way I can accomplish this with some custom using $el?

Thanks in advance!

[ruenel]

Hello Justin,

Thanks for writing in!

You do not need any custom css. The colors can be set within the accordion element settings.

Background color:

Arrow colors:

Header Text color:

And if incase you need a different active colors, you can add this in the element css:

.$el.x-acc .x-acc-header[class*="active"] {
    color: red;
    background-color: white;
}

.$el.x-acc .x-acc-header[class*="active"] .x-acc-header-indicator {
    color: red;
}

Hope this helps.

[Justinbouck]

@RueNel

.$el.x-acc .x-acc-header[class*=“active”] {
color: red;
background-color: white;
}

Thank you for your reply.

So I tried the custom CSS but it did not work. From what I can tell the built-in header editor only has two modes: Background (inactive) and Interactive (hover AND active). I am looking for the following:
Inactive: Transparent
Hover: Color 1
Active: Color 2

[nabeel]

Hi again,

Apologies, there was a syntax error in the code, you should try this one instead:

$el.x-acc .x-acc-header[class*="active"] {
    color: red !important;
    background-color: white !important;
}

$el.x-acc .x-acc-header[class*="active"] .x-acc-header-indicator {
    color: red !important;
}

However for Inactive and Hover states you can set the color and background color from the Accordion element settings in Cornerstone. For example to set the item transparent, go to Accordion > Items tab (see screenshot)

Under Item Setup, set the Background to transparent (see screenshot)

Now head over to Accordion > Header tab:

Under Header Setup, set the background Base color to transparent and Interactive color as per your need (see screenshot)

Hope this helps!

[Justinbouck]

@Nabeel

$el.x-acc .x-acc-header[class*=“active”] {
color: red !important;
background-color: white !important;
}

This worked like a charm, thank you!

[jade]

You’re welcome, Justin.