Nested accordion inherits parent's flush styling

[Ylaana]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When nesting a 'regular' accordion inside an accordion with the .accordion-flush class, it inherits the flush styling. I'd expect the nested accordion to retain the default styling.

Reduced test cases

https://codepen.io/ylaana/pen/OJEWJYM

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2.2

[vardhanreddy27]

It sounds like you are experiencing an issue with the styling of nested accordions in the Bootstrap library.

By default, accordions in Bootstrap use a "card" style, which includes a box shadow and some padding around the accordion content. The .accordion-flush class removes this styling to create a "flush" accordion, which has no padding or box shadow around the content.

If you nest a "regular" accordion (i.e. an accordion without the .accordion-flush class) inside a flush accordion, the inner accordion will inherit the flush styling due to the way CSS works. This is because the inner accordion is a descendant of the outer flush accordion, and the styles applied to the outer accordion will also be applied to its descendants unless they are explicitly overridden.

One way to avoid this issue is to add a wrapper element around the inner accordion and apply the .accordion class to the wrapper instead of the inner accordion itself. This will allow you to apply different styles to the inner and outer accordions without affecting each other.

For example:

[MXMLN-sec]

One way to avoid this issue is to add a wrapper element around the inner accordion and apply the .accordion class to the wrapper instead of the inner accordion itself. This will allow you to apply different styles to the inner and outer accordions without affecting each other.

For example:

I'm not really sure what you ment with the wrapper element.
An Accordion in Bootstrap already has a wrapper with the vlass accordion <div class="accordion">.

And adding the same wrapper again like below won't make any sense and also won't resolve the problem.

<div class="accordion">
  <div class="accordion">
    <!-- inner regular accordion -->
    ...
  </div>
</div>