Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 10, 2016 at 3:04 am #697151
    m_roventine

    I’m trying to add a different background to each accordion title box (one for active, a different one for inactive). I figured out how to do this via CSS for all of them at once but can’t find a way to target each one separately.

    For example, I have 4 title boxes: I want box 1 to have a blue inactive background, box 2 to have a red inactive background, box 3 to have a yellow inactive background, and box 4 to have purple background.

    I appreciate any assistance.

    October 10, 2016 at 8:47 am #697189
    Vinay

    Hey m_roventine,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    nth-child(x) where x is the number of the tab if you have more tabs please add more blocks of css to match the number of tabs.

    /* Accordion Tabs Color*/

.av_toggle_section:nth-child(1) .toggler, .av_toggle_section:nth-child(1) .toggler{
background: red!important;
}

.av_toggle_section:nth-child(2) .toggler, .av_toggle_section:nth-child(2) .toggler {
background: gold!important;
}

.av_toggle_section:nth-child(3) .toggler, .av_toggle_section:nth-child(3) .toggler {
background: green!important;
}

    /* Accordion Tabs Color on hover*/

.av_toggle_section:nth-child(1) .toggler, .av_toggle_section:nth-child(1) .toggler:hover {
background: pink!important;
}

.av_toggle_section:nth-child(2) .toggler, .av_toggle_section:nth-child(2) .toggler:hover {
background: black!important;
}

.av_toggle_section:nth-child(3) .toggler, .av_toggle_section:nth-child(3) .toggler:hover {
background: gray!important;
}

    Best regards,
    Vinay

    • This reply was modified 9 years, 3 months ago by Vinay.
    October 10, 2016 at 7:14 pm #697515
    m_roventine

    That works perfectly! Thank you.

    October 11, 2016 at 7:50 am #697657
    Rikard

    Hi,

    Great, glad we could help :-)

    Please open a new thread if you should have any further questions or problems.

    Regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Style accordion title boxes separately’ is closed to new replies.