Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Accordion Component

Build vertically collapsing accordions in combination with our Angular Collapse component.

## Examples Click the accordions below to expand/collapse the accordion content.

### Flush Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

### Always open Make accordion items stay open when another item is opened.

--- ## API ### Accordion Module ```typescript import { AccordionModule, SharedModule } from '@coreui/angular'; @NgModule({ imports: [ AccordionModule, SharedModule ] }) export class AppModule(){} ``` ### c-accordion _component_ #### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `flush` | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. | `boolean` |_undefined_| | `alwaysOpen` | Make accordion items stay open when another item is opened | `boolean` |_undefined_|

--- ### c-accordion-item _component_ #### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `visible` | Toggle an accordion item programmatically | `boolean` | `false` |

--- ### cAccordionButton _directive_ #### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `collapsed` | Toggles an accordion button collapsed state. Use in accordionHeaderTemplate. |`boolean`|_undefined_|

### Shared Module ### cTemplateId _directive_

|prop|type|default|description| |---|---|---|---| |`cTemplateId`|`string`|_undefined_| template name to render|

_templates:_

|template id| description| |---|---| |`accordionHeader` | header content only| |`accordionBody` | body content only| |`accordionHeaderTemplate` | header full template| |`accordionBodyTemplate` | body full template|

--- _internals:_ ##### AccordionService _service_

|prop|type|default|description| |---|---|---|---| |`items`|`AccordionItemComponent[]`|_[ ]_| array of accordion items| |`alwaysOpen`|`boolean`|_false_| in sync with `AccordionComponent.alwaysOpen` prop|