Accordion in Angular adding collapse inside item

Adding a collapse inside accordion to show or hide a certain fields / controls and adjust the height. In order to achieve this, I added a button that will trigger the collapse and a css

:host ::ng-deep .accordion-item:last-of-type { .accordion-collapse { height: auto !important; } } The collapse works with height set to auto, but when I click the toggle in accordion, all the controls disappear and it will not close.

• Operating system and version (Windows 11)
• Browser and version (Microsoft Edge)

[32x0lf]

It works now. I updated to the latest version. Thanks a lot for helping.

[xidedix]

@32x0lf one more question - have you got imported SharedModule ?

I am not sure what you meant, Is that a core ui module?

That’s right

import {
  AccordionModule,
  ButtonModule,
  CollapseModule,
  FormModule,
  GridModule,
  SharedModule,
  SpinnerModule,
} from '@coreui/angular';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    AccordionModule,
    ButtonModule,
    CollapseModule,
    FormModule,
    GridModule,
    SharedModule,
    SpinnerModule,
    ...
  ],
   ...
})
export class YourModule {}

see: https://stackblitz.com/edit/angular-ivy-yjkctj?file=src%2Fapp%2Fapp.component.scss,src%2Fapp%2Fapp.module.ts working example: https://stackblitz.com/edit/angular-ivy-yjkctj