Accordion background transparent
Application Type
Traditional Web, Mobile, Reactive, Service

I want to make the accordion background transparent. I try to use "background-transparent" CSS in ExtendedClass property of accordion but not working.

Any suggestions, please.

Thanks in advance.

mvp_badge
MVP
Solution

Hi Narendra, 

To make the accordion background transparent by using the defined extended class, 

you will have to chain the .section-expandable class along with the defined extended class as mentioned below.

CSS Snippet:

.custom-accordion-style .section-expandable {
    background: transparent;
}

See this sample screen: AccordionPOC (RWA)

I hope this helps you!


Kind regards,

Benjith Sam

Thanks, @Benjith Sam, this is working well.

mvp_badge
MVP

You're welcome, Narendra

Glad to help you :)


kind regards,

Benjith Sam

Hi Narendra,


When checking the accordion element in the browser's dev tools the class isn't applied?
Probably the accordion wrapper is transparent, but the accordion items (child elements) aren't and that's why you don't see it as transparent.


If you want, you may share the .oml or the link to the app and I'll check it for you.


mvp_badge
MVP
Solution

Hi Narendra, 

To make the accordion background transparent by using the defined extended class, 

you will have to chain the .section-expandable class along with the defined extended class as mentioned below.

CSS Snippet:

.custom-accordion-style .section-expandable {
    background: transparent;
}

See this sample screen: AccordionPOC (RWA)

I hope this helps you!


Kind regards,

Benjith Sam

Thanks, @Benjith Sam, this is working well.

mvp_badge
MVP

You're welcome, Narendra

Glad to help you :)


kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.