[GemmaParticipant]

Hi there,

Is it possible to change the background colour of the title boxes using an inline style within the Accordion shortcode?

In this example on the link below, instead of them all being black boxes it would be great if I could make one green, one blue, one red, one yellow etc.

http://www.hellogemma.com/2015/04/08/tatler-for-birchbox/

How can I do this?

Thanks in advance.

Gemma

[John EzraMember]

Hi Gemma,

Thanks for writing in! It is only possible to do inline styling for the whole accordion item and not just the title via the short code. You can however, use CSS to target the different accordion titles using child selectors. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

/* First Accordion title */
.x-accordion-group:nth-child(1) .x-accordion-toggle.collapsed,
.x-accordion-group:nth-child(1) .x-accordion-toggle {
    background-color: #008000;
    color:#ffffff;
}

/* Second Accordion title */
.x-accordion-group:nth-child(2) .x-accordion-toggle.collapsed,
.x-accordion-group:nth-child(2) .x-accordion-toggle {
    background-color: #0000FF;
    color:#ffffff;
}

/* Third Accordion title */
.x-accordion-group:nth-child(3) .x-accordion-toggle.collapsed,
.x-accordion-group:nth-child(3) .x-accordion-toggle {
    background-color: #FF0000;
    color:#ffffff;
}

/* Fourth Accordion title */
.x-accordion-group:nth-child(4) .x-accordion-toggle.collapsed,
.x-accordion-group:nth-child(4) .x-accordion-toggle {
    background-color: #FFFF00;
    color:#000000;
}

/* Fifth Accordion title */
.x-accordion-group:nth-child(5) .x-accordion-toggle.collapsed,
.x-accordion-group:nth-child(5) .x-accordion-toggle {
    background-color: #000000;
    color:#ffffff;
}

/* Sixth Accordion title */
.x-accordion-group:nth-child(6) .x-accordion-toggle.collapsed,
.x-accordion-group:nth-child(6) .x-accordion-toggle {
    background-color: #333333;
    color:#ffffff;
}

Hope this helps – thanks!

[CliffParticipant]

I’m trying to get this to work as well. I would like different colors for various accordions. I have 6, but haven’t been able to figure out how to get each one a separate class that works to assign a different background color. Using the above code all 6 accordions are the /* First Accordion title */ background color. I’ve tried assigning classes but it doesn’t work or I’m doing something wrong.

I have 6 accordions. I want 1 with one color, 2 with another color, and 3 with another color. Thanks

[ThaiModerator]

Hi @cliff_lusk,
Would you mind providing us your website URL so we can take a closer look?
Many thanks.

[CliffParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi @cliff_lusk,
You can try this following CSS:

/* First Accordion title */
.x-accordion:nth-child(1) .x-accordion-toggle.collapsed,
.x-accordion:nth-child(1) .x-accordion-toggle {
    background-color: #008000;
    color:#ffffff;
}

/* Second Accordion title */
.x-accordion:nth-child(2) .x-accordion-toggle.collapsed,
.x-accordion:nth-child(2) .x-accordion-toggle {
    background-color: #0000FF;
    color:#ffffff;
}

/* Third Accordion title */
.x-accordion:nth-child(3) .x-accordion-toggle.collapsed,
.x-accordion:nth-child(3) .x-accordion-toggle {
    background-color: #FF0000;
    color:#ffffff;
}

/* Fourth Accordion title */
.x-accordion:nth-child(4) .x-accordion-toggle.collapsed,
.x-accordion:nth-child(4) .x-accordion-toggle {
    background-color: #FFFF00;
    color:#000000;
}

/* Fifth Accordion title */
.x-accordion:nth-child(5) .x-accordion-toggle.collapsed,
.x-accordion:nth-child(5) .x-accordion-toggle {
    background-color: #000000;
    color:#ffffff;
}

/* Sixth Accordion title */
.x-accordion:nth-child(6) .x-accordion-toggle.collapsed,
.x-accordion:nth-child(6) .x-accordion-toggle {
    background-color: #333333;
    color:#ffffff;
}

Hope this helps.

[Author]

Posts