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|