Angular Bootstrap Collapse

Angular Collapse - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

It's easy to toggle the visibility of content across your project with a few classes and our TypeScript code.

How it works

The collapse feature is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you may toggle. Collapsing an element will animate the height from it’s 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.

Example

Click the buttons below to show and hide another element via class changes:

  1. .collapse hides content
  2. .collapsing is applied during transitions
  3. .collapse.show shows content
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<button mdbBtn color="primary" class="waves-light" type="button" (click)="test.toggle()" mdbWavesEffect>
  Toggle collapse
</button>
<div class="" mdbCollapse #test="bs-collapse">
  <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
    keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
</div>

Collapse visible after View init

This shows collapsed text in the ngAfterViewInit lifecycle

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<button mdbBtn color="primary" class="waves-light" type="button" (click)="test.toggle()" mdbWavesEffect>
  Toggle collapse
</button>
<div mdbCollapse [isCollapsed]="true" #test="bs-collapse">
  <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
    craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
</div>
import { CollapseComponent } from 'angular-bootstrap-md or ng-uikit-pro-standard';
import { Component, AfterViewInit, ViewChildren } from '@angular/core';

@Component({
  selector: 'collapse',
  templateUrl: './collapse.component.html',
  styleUrls: ['./collapse.component.scss'],
})
export class CollapseComponent implements AfterViewInit {
  @ViewChildren(CollapseComponent) collapses!: CollapseComponent[];

  ngAfterViewInit() {
    Promise.resolve().then(() => {
      this.collapses.forEach((collapse: CollapseComponent) => {
        collapse.toggle();
      });
    })
  }
}

Accordion MDB Pro component

Using the card component, you can extend the default collapse behavior to create an accordion.

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.
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.
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. 
<!--Accordion wrapper-->
<mdb-accordion [multiple]="false" aria-multiselectable="true">
  <mdb-accordion-item  [collapsed]="true" *ngFor="let item of itemsList">
      <mdb-accordion-item-head> {{ item.title }} </mdb-accordion-item-head>
      <mdb-accordion-item-body> {{ item.description }} </mdb-accordion-item-body>
  </mdb-accordion-item>
</mdb-accordion>
<!--/.Accordion wrapper-->
import { Component } from '@angular/core';

@Component({
  selector: 'collapse',
  templateUrl: './collapse.component.html',
  styleUrls: ['./collapse.component.scss'],
})
export class CollapseComponent {
  itemsList = [
    {
      title: 'Collapsible Group Item #1',
      description: '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.'
    },
    {
      title: 'Collapsible Group Item #2',
      description: '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.'
    },
    {
      title: 'Collapsible Group Item #3',
      description: '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.'
    }
  ];
}

Disabled Accordion MDB Pro component

This sowhs a disabled item via isDisabled property in Accordion.

<!--Accordion wrapper-->
<mdb-accordion [multiple]="false" aria-multiselectable="true">
  <mdb-accordion-item  [collapsed]="true" *ngFor="let item of itemsList; let i = index">
      <mdb-accordion-item-head [isDisabled]="i == 1"> {{ item.title }} </mdb-accordion-item-head>
      <mdb-accordion-item-body> {{ item.description }} </mdb-accordion-item-body>
  </mdb-accordion-item>
</mdb-accordion>
<!--/.Accordion wrapper-->
import { Component } from '@angular/core';

@Component({
  selector: 'collapse',
  templateUrl: './collapse.component.html',
  styleUrls: ['./collapse.component.scss'],
})
export class CollapseComponent {
  itemsList = [
    {
      title: 'Collapsible Group Item #1',
      description: '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.'
    },
    {
      title: 'Collapsible Group Item #2',
      description: '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.'
    },
    {
      title: 'Collapsible Group Item #3',
      description: '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.'
    }
  ];
}

Accessibility

Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element).

If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.

If your control element is targeting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.

Angular Collapse - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of collapse component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

import { CollapseModule, AccordionModule, WavesModule } from 'ng-uikit-pro-standard'
import { CollapseModule, WavesModule } from 'angular-bootstrap-md'
Import example Modules list

Components

CollapseComponent

Selector: mdbCollapse

Type: CollapseComponent

Collapse Inputs

Name Type Default Description Example
isCollapsed boolean true Input determines if element should be collapsed or not at start. [isCollapsed]="true"

Collapse Events

Name Type Description Example
showBsCollapse any This event fires immediately when the show instance method is called. (showBsCollapse)="showBsCollapse()"
shownBsCollapse any This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). (shownBsCollapse)="shownBsCollapse()"
hideBsCollapse any This event is fired immediately when the hide method has been called. (hideBsCollapse)="hideBsCollapse()"
hiddenBsCollapse any This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). (hiddenBsCollapse)="hiddenBsCollapse()"
collapsed any This event fires immediately when the element is collapsed. (collapsed)="collapsed()"
expanded any This event fires immediately when the element is expanded. (expanded)="expanded()"

Accordion Inputs

Name Type Default Description Example
multiple boolean true This attribute enable/disable the multiple item expanded at the same time. [multiple]="true"
collapsed boolean true This attribute enable/disable collapse from the beginning when component is rendered. [collapsed]="true"
isDisabled boolean false This attribute disable accordion item when true. [isDisabled]="true"