Customize Accordion

[KerplunkDesign]

Hello,
I’m trying to change the color of the off-state of the collapsible accordion menus (they are presently white and they get lost on the page). I could add a grey border if that were easier… but I can’t figure out the css for that either.

ALSO, is there a way to add text (“Click to Expand”) to the left of the “+”/”-” icons?
http://cspmobile.com/site/trucks/hd-2/
Thanks!

[Ben – SUPPORT]

Try

.wpb_accordion .ui-accordion .ui-accordion-header{
background: #DDDDDD !important;
}

Add that into your custom css

I’ll look into the + / – issue otherwise it’ll have to be a bit hacky

Thanks
Ben

[Ben – SUPPORT]

I’ve had a look through the php files to see if I can find it.

Sadly I can’t so I’ll try and get cosmin in to try and help

Thanks
Ben

[Cosmin – SUPPORT]

For the +/- thingie, add this custom CSS in the theme options:

.wpb_accordion_section > h3 .ui-icon:before {
  content: "Click to expand \f067" !important;
}

.wpb_accordion_section h3.ui-state-active .ui-icon:before {
  content: "Click to close \f068" !important;
}

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[KerplunkDesign]

Thanks so much!
The first bit worked like a charm! The color of the off state is perfect!

The second fix worked too. I just had to adjust the CSS of the ui-icon class to accommodate the width and spacing of the new length of the text.

Awesome! You guys rock!
S.

[eduturns]

+1 Very helpful code!

[Cosmin – SUPPORT]

You’re welcome guys 🙂

Remember, if you like the product and support, please take a moment to rate our theme in your ThemeForest downloads area if you haven’t already, we would greatly appreciate it!

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

Cosmin – Support

[helloweb31]

Great Code. Thanks. Just one question: Which code did you use to adjust the ui-icon class to the right size?

Thanks