On this page

Angular Collapse Component

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.

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.

Link

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.

Horizontal

Add thehorizontal property to transition the width instead of height and set a width on the immediate child element.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

Multiple targets

Ac-button can show and hide multiple elements.

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.

API reference

Collapse Module

import { CollapseModule } from '@coreui/angular';@NgModule({   imports: [CollapseModule,]})export class AppModule() { }

cCollapse

directive

Inputs

prop	description	type	default
`visible`	Toggle the visibility of collapsible element	`boolean`	false
`horizontal`	Set horizontal collapsing to transition the width instead of height.	`boolean`	false
`navbar`	Add`navbar` prop for grouping and hiding navbar contents by a parent breakpoint	`boolean`	false

Outputs

prop	description	type	values
`collapseChange`	Event emitted on visibility change	`string`	`opening, open, collapsing, collapsed`

Movatterモバイル変換