Accordion questions

[helloweb31]

Hi, I jst cannot succeed in changing accordions in 2 characteristics:
1 – change the color and font weight of the accordion heading
2 – change the spacing inside the accordion so that the space is minimized (no gap or spacing below the text)

I used the following custom css, but without success:

Problem 1:
I defined a new class which I gave to the header of the accordion in the swiftbuilder classic view code:

.acc_grey {
font-weight:bold !important;
}

–> no effect at all

Problem 2:
.wpb_accordion .ui-accordion .ui-accordion-content{
padding: 0 15px 0 15px !important;
}

–> does not eliminate the spacing below the text as much as I want it to
Is there another wrapper around the text or how to solve this issue?

What to do…

Thanks for your assistance.

[helloweb31]

This reply has been marked as private.

[helloweb31]

This reply has been marked as private.

[Cosmin – SUPPORT]

Hi,

Try this:

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #FFFFFF !important;
    font-weight: bold;
}

Regards,
————————————————————————————————————

Cosmin – Support

[helloweb31]

QUESTION 1:
Thanks for your info. The code changed the color of all the accordions. How can I do this for a particular accordion on a site as I have two accordions on many sites and want them to have different colors?

QUESTION 2:
How can I change the background of the accordion text section?

QUESTION 3:
And a third question: How to eliminate the spacing after the end of the text section.
I used:

.wpb_accordion .ui-accordion .ui-accordion-content{
padding: 0 15px 0 15px !important;
}

but, it does not eliminate the spacing below the text as much as I want it to
Is there another wrapper around the text or how to solve this issue?

[Cosmin – SUPPORT]

Hi,

1) You would need to add an extra class to your accordion element and add my code again, with the extra class in front. Say the extra class is acc-color-1, you would do this:

.acc-color-1 .ui-state-default a, .acc-color-1 .ui-state-default a:link, .acc-color-1 .ui-state-default a:visited {
    color: #FFFFFF !important;
    font-weight: bold;
}

Repeat for each different color you want to add.

2) I see you already added an extra class and a custom background color (acc-black ? )

3) Add mb0 as an extra class.

Regards,
————————————————————————————————————

Cosmin – Support

[helloweb31]

Dear Cosmin,

Thanks for your reply.

I added the class acc-black. I want the background of the accordion tab to be black for the accordion with this class. So, I tried to add:

.acc-black .wpb_accordion, .acc-black .ui-accordion, .acc-black .ui-accordion-header {
background: #000000 !important;
}

But, it’s not working.

So, what am I doing wrong?

[Ben – SUPPORT]

It seems to be working for me, it could’ve just been cache?

Thanks
Ben

[helloweb31]

It’s working. Thanks!

[SHproduction]

hi,

i add
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
color: #FFFFFF !important;
font-weight: bold;
}
Everythink is ok, but when i click on the accordion the heading text color is alsow white – so what can i write into css ?

[Swift Ideas – Ed]

You can set the selected colour with the following custom css:

.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .wpb_accordion .wpb_accordion_section > h3.ui-state-active a {
color: #222;
}

– Ed