Classic Accordion Element - Text / Background Color, Transparency, Plus Sign

[JacobNFerguson]

Hi Team, I have a number of things I need to change about the classic accordion element. I’ve searched around for each issue individually but figured I’d just ask you all for help and get one clean CSS code rather than splice them in all over the place.

How do you… (1) Make background color 50% black 50% transparent for both open and closed accordion backgrounds. (2) Change all font colors to white. (3) Change border color to black. (4) Get rid of the little “plus sign” icon.

Also can you please make sure the background color stays black/transparent when the accordion is clicked on. I tried a code from another support topic and it reverts back to white when hovered over once it is open.

Thanks a lot!

[friech]

Hi There,

Thank you for writing in, please add this to Theme Options > CSS

/*custom accordion background-color and text color*/
.custom-accordion .x-accordion-inner,
.custom-accordion .x-accordion-heading .x-accordion-toggle,
.custom-accordion .x-accordion-heading .x-accordion-toggle.collapsed {
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
}

/*custom accordion border-color*/
.custom-accordion .x-accordion-group {
	border-color: #000;
}

/*hide the + icon*/
.custom-accordion .x-accordion-heading .x-accordion-toggle:before {
	content: "";
}

Then add a CLASS custom-accordion to the accordion that you want to apply this custom CSS.

Hope it helps,
Cheers!

[JacobNFerguson]

Works great! Thanks a lot. Only thing is that the inner border line between top/bottom content is still white (when accordion is open). How do I fix that?

Thanks!

[nabeel]

Hi again,

Can you please share the URL of your site so we can take a look?

Thanks!

[JacobNFerguson]

Sure, it’s not published yet though… afreemankind.com

[christopher]

Hi there,

The reason that we asked for the URL which contains the accordion is to check the case live and be able to identify the latest request code and give you proper CSS code suggestion.

Would you please kindly give us the URL/User/Pass of your WordPress installation using the Secure Note feature of the topic to be able to help you?

Also, give us the exact URL of the page that contains the Accordion.

Thank you.

[JacobNFerguson]

Ok sure, thank you very much…

[jade]

Hi there,

Please add this code as well:

.x-accordion-inner {
    border: 0;
}

Hope this helps.

[JacobNFerguson]

That’s great. Thanks a lot for the help.

[jade]

You’re welcome.

[Joao]

You are welcome!