Accordion design

[tatyana_kozh]

Hello

I would like my accordion to have the following features on this page:

https://tatyanakozh.staging.wpengine.com/how-it-works-tailoring/

• Text on the toggle to be in NON capital letters and in the same font as the rest of my website
• toggle background colour to be grey and stay grey when opened
• toggle text hover to be orange
• arrow to be the same colour as the rest of the text in the toggle

[Prasant]

Hello @tatyana.kozh,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS to make required changes in accordion:

.x-accordion-heading .x-accordion-toggle {
    text-transform: lowercase;
    font-family: "Josefin Sans",sans-serif;
}

.x-accordion-inner {
    font-family: "Josefin Sans",sans-serif;
}

.x-accordion-heading .x-accordion-toggle {
    background-color: #eae9e9;
    color: #383838;
}

.x-accordion-heading .x-accordion-toggle:hover {
    color: #ffa500;
}

.x-accordion-heading .x-accordion-toggle:before{color: #383838;}

.x-accordion-heading .x-accordion-toggle.collapsed:before{color: #383838;} 

Please let us know how it goes.

Thanks.

[tatyana_kozh]

Hello

Thank you! There are a few issues:

1. I would like to be able to set the capital and lower case letters. At the moment everything in the toggle just turned lower case without me being able to type lower or upper case. I need to be able to use both.

2. The toggle background colour needs to be the same when closed and open - light grey

3. The font colour when toggle is closed needs to be black & NON bold

Could you please assist further?

Thank you!

[Prasant]

Hello @tatyana.kozh,

Thanks for updating thread.

You can add following CSS to make the changes:

.x-accordion-heading .x-accordion-toggle.collapsed {
    background-color: #eae9e9;
    color: #000;
    text-transform: initial;
}

Thanks.