Angular Accordion Component

Accordion

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

Available in Other JavaScript Frameworks

CoreUI Angular Accordion Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Examples

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

import { Component } from '@angular/core';
import {
  AccordionButtonDirective,
  AccordionComponent,
  AccordionItemComponent,
  TemplateIdDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-accordion-example',
  templateUrl: './accordion-example.component.html',
  imports: [AccordionComponent, AccordionItemComponent, TemplateIdDirective, AccordionButtonDirective]
})
export class AccordionExampleComponent {
  items = [1, 2, 3, 4];
}

<c-accordion>
  <c-accordion-item #item0="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>
        Accordion item #0
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is hidden by default,
        until the collapse plugin adds the appropriate classes that we use to style each
        element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding
        our default variables. It's also worth noting that just about any HTML can go within
        the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
  <c-accordion-item #item1="cAccordionItem" [visible]="true">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item1.toggleItem()" [collapsed]="!item1.visible" cAccordionButton>
        Accordion item #1
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default,
        until the collapse plugin adds the appropriate classes that we use to style each
        element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding
        our default variables. It's also worth noting that just about any HTML can go within
        the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
  <c-accordion-item #item2="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item2.toggleItem()" [collapsed]="!item2.visible" cAccordionButton>
        Accordion item #2
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default,
        until the collapse plugin adds the appropriate classes that we use to style each
        element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding
        our default variables. It's also worth noting that just about any HTML can go within
        the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
</c-accordion>

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.

import { Component } from '@angular/core';
import {
  AccordionButtonDirective,
  AccordionComponent,
  AccordionItemComponent,
  TemplateIdDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-accordion-flush',
  templateUrl: './accordion-flush.component.html',
  imports: [AccordionComponent, AccordionItemComponent, TemplateIdDirective, AccordionButtonDirective]
})
export class AccordionFlushComponent {
  items = [1, 2, 3, 4];
}

<c-accordion [flush]="true">
  <c-accordion-item #item0="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>
        Accordion item #0
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is hidden by default,
        until the collapse plugin adds the appropriate classes that we use to style each
        element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding
        our default variables. It's also worth noting that just about any HTML can go within
        the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
  <c-accordion-item #item1="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item1.toggleItem()" [collapsed]="!item1.visible" cAccordionButton>
        Accordion item #1
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default,
        until the collapse plugin adds the appropriate classes that we use to style each
        element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding
        our default variables. It's also worth noting that just about any HTML can go within
        the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
  <c-accordion-item #item2="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item2.toggleItem()" [collapsed]="!item2.visible" cAccordionButton>
        Accordion item #2
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default,
        until the collapse plugin adds the appropriate classes that we use to style each
        element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding
        our default variables. It's also worth noting that just about any HTML can go within
        the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
</c-accordion>

Always open

Make accordion items stay open when another item is opened.

import { Component } from '@angular/core';
import {
  AccordionButtonDirective,
  AccordionComponent,
  AccordionItemComponent,
  TemplateIdDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-accordion-always-open',
  templateUrl: './accordion-always-open.component.html',
  imports: [AccordionComponent, AccordionItemComponent, TemplateIdDirective, AccordionButtonDirective]
})
export class AccordionAlwaysOpenComponent {
  items = [1, 2, 3, 4];
}

<c-accordion [alwaysOpen]="true">
  <c-accordion-item #item0="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>
        Accordion item #0
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is hidden by default,
        until the collapse plugin adds the appropriate classes that we use to style each
        element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding
        our default variables. It's also worth noting that just about any HTML can go within
        the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
  <c-accordion-item #item1="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item1.toggleItem()" [collapsed]="!item1.visible" cAccordionButton>
        Accordion item #1
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default,
        until the collapse plugin adds the appropriate classes that we use to style each
        element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding
        our default variables. It's also worth noting that just about any HTML can go within
        the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
  <c-accordion-item #item2="cAccordionItem" [visible]="false">
    <ng-template cTemplateId="accordionHeaderTemplate">
      <button (click)="item2.toggleItem()" [collapsed]="!item2.visible" cAccordionButton>
        Accordion item #2
      </button>
    </ng-template>
    <ng-template cTemplateId="accordionBodyTemplate">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default,
        until the collapse plugin adds the appropriate classes that we use to style each
        element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding
        our default variables. It's also worth noting that just about any HTML can go within
        the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </ng-template>
  </c-accordion-item>
</c-accordion>

API

Accordion Module

import { AccordionModule, SharedModule } from '@coreui/angular';

@NgModule({
    imports: [
      AccordionModule,
      SharedModule
    ]
})
export class AppModule(){}

c-accordion

component

jsx

import { AccordionComponent } from '@coreui/angular'

Property	Default	Type
alwaysOpen	`false`	`boolean`
Make accordion items stay open when another item is opened
flush	`false`	`boolean`
Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

c-accordion-item

component

jsx

import { AccordionItemComponent } from '@coreui/angular'

Property	Default	Type
visible	`false`	`boolean`
Toggle an accordion item programmatically

cAccordionButton

directive

jsx

import { AccordionButtonDirective } from '@coreui/angular'

Property	Default	Type
collapsed	`undefined`	`boolean`
Toggles an accordion button collapsed state. Use in accordionHeaderTemplate.
type	`'button'`	`string`
Default type for cAccordionButton

Shared Module

cTemplateId

directive

jsx

import { TemplateIdDirective } from '@coreui/angular'

Property	Default	Type
cTemplateId	-	`string`
Predefined template name (id) for optional slots

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