Angular Collapse

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

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.

## Horizontal Add the `horizontal` property to transition the width instead of height and set a width on the immediate child element.

## Multiple targets A `c-button` can show and hide multiple elements.

|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`