Accordion Transparent Background

Support
#1

Support,

How can I make my accordions’ backgrounds transparent? I have tried to use this global CSS code, which is successful in changing their colors, but not in making the backgrounds transparent:

.x-accordion-heading .x-accordion-toggle {
background-color: transparent;
border: 1px solid #fff;
color: #000;
}

.x-accordion-inner {
border-color: #fff;
background-color: transparent;
}

.x-accordion-heading .x-accordion-toggle:hover {
color: #000;
}

.x-accordion-heading .x-accordion-toggle:hover::before,
.x-accordion-heading .x-accordion-toggle.collapsed::before {
color: #000;
}

.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: transparent;
}

I have also tried rgba(255, 255, 255, 0.0) instead of transparent, but that does not work.

Thanks!

#2

Bump. I am still having this issue.

#3

Hey there,

Your code looks correct. Please check your all your custom CSS for syntax errors using tools like http://csslint.net/. If there are no errors, please give us the URL of your page with accordion.

Please don’t bump your thread as it will be push it down the queue. For more details, please see https://theme.co/apex/forum/t/how-to-get-support/288

Thanks.

#4

Thanks for the help! There do not seem to be any CSS syntax errors. Here is the link to my page:

Thanks!

#5

Hi again,

Thank you for providing the URL. Your code is working fine, please add the following code in your Customizer as well:

.x-accordion-group {
    background-color: transparent !important;
}
.x-accordion-heading .x-accordion-toggle {
    border: none !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#6

That worked great! Thank you for the help.

#7

Glad we could help.

Cheers!