Angular Collapse directive toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
Available in Other JavaScript Frameworks
CoreUI Angular Collapse Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:
On this page
How it works
The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.
Examples
You can use it with a link or a button element.
import { Component, signal } from '@angular/core';
import { ButtonDirective, CardBodyComponent, CardComponent, CollapseDirective } from '@coreui/angular';
@Component({
selector: 'docs-collapse',
templateUrl: './collapse.component.html',
imports: [ButtonDirective, CollapseDirective, CardComponent, CardBodyComponent]
})
export class CollapseComponent {
readonly visible = signal(false);
toggleCollapse(): void {
this.visible.update((value) => !value);
}
}<a (click)="toggleCollapse()" cButton class="me-1" color="primary">Link</a>
<button (click)="toggleCollapse()" cButton class="me-1" color="primary">Button</button>
<div [visible]="visible()" cCollapse>
<c-card class="mt-3 shadow">
<c-card-body>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</c-card-body>
</c-card>
</div>Horizontal
Add the horizontal property to transition the width instead of height and set a width on the immediate child element.
import { Component, signal } from '@angular/core';
import { ButtonDirective, CardBodyComponent, CardComponent, CollapseDirective } from '@coreui/angular';
@Component({
selector: 'docs-collapse-horizontal',
templateUrl: './collapse-horizontal.component.html',
imports: [ButtonDirective, CardComponent, CollapseDirective, CardBodyComponent]
})
export class CollapseHorizontalComponent {
readonly visible = signal(false);
toggleCollapse(): void {
this.visible.update((visible) => !visible);
}
}<button (click)="toggleCollapse()" cButton class="me-1 mb-3" color="primary" [attr.aria-expanded]="visible()">Button</button>
<div style="min-height: 130px;">
<c-card [visible]="visible()" cCollapse horizontal class="shadow" style="max-width: 260px;">
<c-card-body style="width: 260px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</c-card-body>
</c-card>
</div>
Multiple targets
A c-button can show and hide multiple elements.
import { Component, signal } from '@angular/core';
import {
ButtonDirective,
CardBodyComponent,
CardComponent,
ColComponent,
CollapseDirective,
RowComponent
} from '@coreui/angular';
@Component({
selector: 'docs-collapse-multiple-targets',
templateUrl: './collapse-multiple-targets.component.html',
imports: [ButtonDirective, RowComponent, ColComponent, CollapseDirective, CardComponent, CardBodyComponent]
})
export class CollapseMultipleTargetsComponent {
readonly visible = signal([false, false]);
toggleCollapse(id: number): void {
this.visible.update((value) => {
value[id] = !value[id];
return value;
});
}
}<button (click)="toggleCollapse(0)" cButton class="me-1" color="primary">Toggle first element</button>
<button (click)="toggleCollapse(1)" cButton class="me-1" color="primary">Toggle second element</button>
<button (click)="toggleCollapse(0); toggleCollapse(1);" cButton class="me-1" color="primary">Toggle both</button>
<c-row>
<c-col [xs]="6">
<div [visible]="visible()[0]" cCollapse>
<c-card class="mt-3">
<c-card-body>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</c-card-body>
</c-card>
</div>
</c-col>
<c-col [xs]="6">
<div [visible]="visible()[1]" cCollapse>
<c-card class="mt-3">
<c-card-body>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</c-card-body>
</c-card>
</div>
</c-col>
</c-row>API reference
Collapse Module
import { CollapseModule } from '@coreui/angular';
@NgModule({
imports: [CollapseModule,]
})
export class AppModule() { }cCollapse
directive
import { CollapseDirective } from '@coreui/angular'