Accordion

Angular Bootstrap 5 Accordion component

Responsive Accordion built with Bootstrap 5, Angular and Material Design. Accordion is a vertically collapsing element to show and hide content via class changes.

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

How it works

The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, use [collapsed]="false" on accordion item.

Basic example

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Show code

HTML

<mdb-accordion>
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

Flush

Use [flush]="true" input to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

Show code

HTML

<mdb-accordion [flush]="true">
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

Borderless

Use [borderless]="true" input to remove all the borders and add a background color to the active item.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-borderless class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-borderless class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-borderless class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

Show code

HTML

<mdb-accordion [borderless]="true">
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
      Placeholder content for this accordion, which is intended to demonstrate the
      <code>.accordion-borderless</code> class. This is the first item's accordion body.
    </ng-template>
  </mdb-accordion-item>
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
      Placeholder content for this accordion, which is intended to demonstrate the
      <code>.accordion-borderless</code> class. This is the second item's accordion body.
      Let's imagine this being filled with some actual content.
    </ng-template>
  </mdb-accordion-item>
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      Placeholder content for this accordion, which is intended to demonstrate the
      <code>.accordion-borderless</code> class. This is the third item's accordion body.
      Nothing more exciting happening here in terms of content, but just filling up
      the space to make it look, at least at first glance, a bit more representative
      of how this would look in a real-world application.
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

Always open

Use [multiple]="true" input to make accordion items stay open when another item is opened.

Show code

HTML

<mdb-accordion [multiple]="true">
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

Disabled item

Add [disabled]="true" input to accordion items you want to disable

Show code

HTML

<mdb-accordion>
  <mdb-accordion-item [disabled]="true">
    <ng-template mdbAccordionItemHeader>Disabled Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
      brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
      aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
      ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
      farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
      accusamus labore sustainable VHS.
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

Accessibility

Please read the collapse accessibility section for more information.

Accordion - API

Import

Show code

app.module.ts

import { MdbAccordionModule } from 'mdb-angular-ui-kit/accordion';
…
@NgModule ({
  ...
  imports: [MdbAccordionModule],
  ...
})

Inputs

MdbAccordionComponent

Name	Type	Default	Description
`borderless`	Boolean	`false`	Removes all the borders and adds a `background-color` to the active item items
`flush`	Boolean	`false`	Removes `background-color` and `border` styles from accordion items
`multiple`	Boolean	`false`	Whether multiple opened accordion items should be allowed

MdbAccordionItemComponent

Name	Type	Default	Description
`disabled`	Boolean	`false`	Enables/disables accordion item
`collapsed`	Boolean	`true`	Whether item should be collapsed by default
`header`	String		Defines string that will be displayed as item header

Outputs

MdbAccordionItemComponent

Name	Type	Description
`itemShow`	EventEmitter<MdbAccordionItemComponent>	Fires when show animation starts.
`itemShown`	EventEmitter<MdbAccordionItemComponent>	Fires when show animation ends.
`itemHide`	EventEmitter<MdbAccordionItemComponent>	Fires when hide animation starts.
`itemHidden`	EventEmitter<MdbAccordionItemComponent>	Fires when hide animation ends.

Show code

HTML
Typescript

<mdb-accordion>
  <mdb-accordion-item (itemShow)="onFirstItemShow($event)">
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
      This is the first item's accordion body.
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
      This is the second item's accordion body.
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      This is the third item's accordion body.
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

import { Component } from '@angular/core';
import { MdbAccordionItemComponent } from 'mdb-angular-ui-kit/accordion';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  onFirstItemShow(event: MdbAccordionItemComponent) {
    console.log('First accordion item show: ', event);
  }
}

Methods

MdbAccordionItemComponent

Name	Description	Example
`hide`	Hides the accordion item	`accordionItem.hide()`
`show`	Shows the accordion item	`accordionItem.show()`
`toggle`	Manually toggles the accordion item	`accordionItem.toggle()`

Show code

HTML
Typescript

<mdb-accordion>
  <mdb-accordion-item #firstItem>
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
      This is the first item's accordion body.
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
      This is the second item's accordion body.
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      This is the third item's accordion body.
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MdbAccordionItemComponent } from 'mdb-angular-ui-kit/accordion';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('firstItem') firstItem!: MdbAccordionItemComponent;

  ngAfterViewInit(): void {
    setTimeout(() => {
      this.firstItem.show();
    }, 2000);
  }
}

CSS variables

As part of MDB’s evolving CSS variables approach, accordion now uses local CSS variables on .accordion for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Show code

// .accordion
--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};

// .accordion-flush
--#{$prefix}accordion-flush-btn-box-shadow: #{$accordion-flush-button-box-shadow};
--#{$prefix}accordion-flush-border-bottom: #{$accordion-flush-item-border-bottom};

// .accordion.accordion-borderless,
// .accordion.accordion-flush
--#{$prefix}accordion-bg: transparent;

// .accordion-borderless
--#{$prefix}accordion-borderless-btn-border-radius: #{$accordion-borderless-button-border-radius};
--#{$prefix}accordion-borderless-btn-bg: #{$accordion-borderless-button-bgc};
--#{$prefix}accordion-borderless-btn-color: #{$accordion-borderless-button-color};

SCSS variables

Show code

SCSS

$accordion-padding-y: 1.15rem;
$accordion-padding-x: 1.5rem;
$accordion-color: $body-color;
$accordion-bg: $body-bg;
$accordion-border-width: $border-width;
$accordion-border-color: var(--#{$prefix}border-color);
$accordion-border-radius: $border-radius-lg;
$accordion-inner-border-radius: subtract(
  $accordion-border-radius,
  $accordion-border-width
);

$accordion-body-padding-y: $accordion-padding-y;
$accordion-body-padding-x: $accordion-padding-x;

$accordion-button-padding-y: $accordion-padding-y;
$accordion-button-padding-x: $accordion-padding-x;
$accordion-button-color: $accordion-color;
$accordion-button-bg: var(--#{$prefix}accordion-bg);
$accordion-transition: $btn-transition, border-radius 0.15s ease;
$accordion-button-active-bg: $white;
$accordion-button-active-color: $primary;

$accordion-button-focus-border-color: $input-focus-border-color;
$accordion-button-focus-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);

$accordion-icon-width: 1.25rem;
$accordion-icon-color: $accordion-button-color;
$accordion-icon-active-color: $accordion-button-active-color;
$accordion-icon-transition: transform 0.2s ease-in-out;
$accordion-icon-transform: rotate(-180deg);

$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

$accordion-flush-button-box-shadow: inset 0 -2px 0 hsl(0, 0%, 96%);
$accordion-flush-item-border-bottom: 2px solid hsl(0, 0%, 96%);
$accordion-borderless-button-border-radius: 0.5rem;
$accordion-borderless-button-bgc: rgb(223, 231, 246);
$accordion-borderless-button-color: rgb(44, 88, 160);

Accordion

Angular Bootstrap 5 Accordion component

How it works

Basic example

Accordion Item #1

Accordion Item #2

Accordion Item #3

Flush

Accordion Item #1

Accordion Item #2

Accordion Item #3

Borderless

Accordion Item #1

Accordion Item #2

Accordion Item #3

Always open

Accordion Item #1

Accordion Item #2

Accordion Item #3

Disabled item

Disabled Accordion Item #1

Accordion Item #2

Accordion Item #3

Accessibility

Related resources

Accordion - API

Import

Inputs

MdbAccordionComponent

MdbAccordionItemComponent

Outputs

MdbAccordionItemComponent

Methods

MdbAccordionItemComponent

CSS variables

SCSS variables