Angular Bootstrap Accordion

Angular Accordion - 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

The Angular Bootstrap accordion is a component that organizes content within collapsable items. Accordion allows only one collapsed item to be shown at the same time.

Accordions can toggle through a number of text blocks with a single click, and that greatly increases the UX of your project.

Examples of Angular Bootstrap accordion use include:

  • A FAQ page
  • Multiple items presentation
  • Data tables

Basic accordion MDB Pro component

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.
        
            
                <mdb-accordion [multiple]="false">
                  <mdb-accordion-item [collapsed]="false">
                    <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
  
                  <mdb-accordion-item>
                    <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
  
                  <mdb-accordion-item>
                    <mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
                </mdb-accordion>
              
        
    

Multiple accordion MDB Pro component

Add a [multiple]="true" input to allow accordion to open many cards at the same time.

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.
        
            
                <mdb-accordion [multiple]="true">
                  <mdb-accordion-item [collapsed]="false">
                    <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
  
                  <mdb-accordion-item>
                    <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
  
                  <mdb-accordion-item>
                    <mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
                </mdb-accordion>
              
        
    

Expanded accordion MDB Pro component

Add a [collapsed]="false" input to mdb-accordion-item to make it expanded by default.

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.
        
            
                <mdb-accordion>
                  <mdb-accordion-item [collapsed]="false">
                    <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
  
                  <mdb-accordion-item>
                    <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
  
                  <mdb-accordion-item>
                    <mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
                </mdb-accordion>
              
        
    

Disabled accordion MDB Pro component

Add a [isDisabled]="true" input to mdb-accordion-item-head to make a specific item disabled.

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.
        
            
                <mdb-accordion>
                  <mdb-accordion-item [collapsed]="false">
                    <mdb-accordion-item-head [isDisabled]="true">Collapsible Group Item #1</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
  
                  <mdb-accordion-item>
                    <mdb-accordion-item-head [isDisabled]="true">Collapsible Group Item #2</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
  
                  <mdb-accordion-item>
                    <mdb-accordion-item-head [isDisabled]="true">Collapsible Group Item #3</mdb-accordion-item-head>
                    <mdb-accordion-item-body>
                      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.
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
                </mdb-accordion>
              
        
    

Collapse Accordion with method MDB Pro component

Use the toggle(collapsed: boolean) method from SBItemComponent class to toggle the collapse animation.

        
            
            <mdb-accordion [multiple]="true">
              <mdb-accordion-item [collapsed]="false">
                <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
                <mdb-accordion-item-body>
                  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.
                </mdb-accordion-item-body>
              </mdb-accordion-item>
              <mdb-accordion-item>
                <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
                <mdb-accordion-item-body>
                  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.
                </mdb-accordion-item-body>
              </mdb-accordion-item>
              <mdb-accordion-item>
                <mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>
                <mdb-accordion-item-body>
                  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.
                </mdb-accordion-item-body>
              </mdb-accordion-item>
            </mdb-accordion>
            <button mdbBtn color="primary" mdbWavesEffect (click)="collapse(collapsed = !collapsed)">Collapse Accordion</button>
          
        
    
        
            
            import {Component, QueryList, ViewChildren} from '@angular/core';
            import {SBItemComponent} from 'ng-uikit-pro-standard';
  
            @Component({
              selector: 'toggle-collapse',
              templateUrl: './toggle-collapse.component.html',
              styleUrls: ['./toggle-collapse.component.scss'],
            })
            export class ToggleCollapseComponent {
              @ViewChildren(SBItemComponent) collapses!: QueryList<SBItemComponent>[];
  
              collapsed = false;
  
              collapse(collapsed: boolean) {
                this.collapses.forEach((el: any) => {
                  el.toggle(collapsed);
                });
              }
            }
          
        
    

Accordion animation state change MDB Pro component

Use the (animationStateChange) event from the SBItemBodyComponent class to listen to an animation state change.

        
            
            <mdb-accordion [multiple]="false">
              <mdb-accordion-item [collapsed]="true">
                <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
                <mdb-accordion-item-body (animationStateChange)="onAnimationStateChange($event)">
                  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.
                </mdb-accordion-item-body>
              </mdb-accordion-item>
              <mdb-accordion-item>
                <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
                <mdb-accordion-item-body (animationStateChange)="onAnimationStateChange($event)">
                  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.
                </mdb-accordion-item-body>
              </mdb-accordion-item>
              <mdb-accordion-item>
                <mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>
                <mdb-accordion-item-body (animationStateChange)="onAnimationStateChange($event)">
                  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.
                </mdb-accordion-item-body>
              </mdb-accordion-item>
            </mdb-accordion>
          
        
    
        
            
            import {Component} from '@angular/core';
  
            @Component({
              selector: 'animation-state',
              templateUrl: './animation-state.component.html',
              styleUrls: ['./animation-state.component.scss'],
            })
            export class AnimationStateComponent {
              onAnimationStateChange(state: any) {
                console.log(state);
              }
            }
          
        
    

Angular Accordion - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of accordion 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 { AccordionModule, WavesModule } from 'ng-uikit-pro-standard'
        
        
    
        
            
          import { CollapseModule, WavesModule } from 'angular-bootstrap-md'
        
        
    

Components

MdbAccordion

Selector: mdb-accordion

Type: SqueezeBoxComponent

MdbAccordionItem

Selector: mdb-accordion-item

Type: SBItemComponent

MdbAccordionItemHead

Selector: mdb-accordion-item-head

Type: SBItemHeadComponent

MdbAccordionItemBody

Selector: mdb-accordion-item-body

Type: SBItemBodyComponent


Inputs

MdbAccordion
Name Type Default Description Example
multiple boolean true Specifies wheter many accordion items can be opened in the same time [multiple]="false"
autoExpand boolean true Specifies wheter accordion items should be auto expanded when routerLink attached to the item is the same as active route (use only for accordion that is inside sidenav component) [autoExpand]="false"
MdbAccordionItem
Name Type Default Description Example
collapsed boolean true Specifies wheter accordion item is collapsed or expanded [collapsed]="false"
customClass string - Allow to add custom styles to component [customClass]="'class-1 class-2'"
MdbAccordionItemHead
Name Type Default Description Example
customClass string - Allow to add custom styles to component [customClass]="'class-1 class-2'"
indicator boolean true Specifies wheter arrow indicator is visible [indicator]="false"
isDisabled boolean false Allow to disable accordion item [isDisabled]="true"
MdbAccordionItemBody
Name Type Default Description Example
customClass string - Allow to add custom styles to component [customClass]="'class-1 class-2'"

Methods

MdbAccordionItem

Selector: mdb-accordion-item

Type: SBItemComponent

Name Description
toggle(collapsed: boolean) Toggle the collapse animation.
applyToggle(collapsed: boolean) Toggle the collapse animation (use when [multiple]="false").

Events

MdbAccordionItemBody
Name Type Description Example
animationStateChange <{state: string, accordionEl: ElementRef}> The event is fired when accordion animation is end (the state is changed). (animationStateChange)="onAnimationStateChange($event)"

Angular Accordion - examples & customization


Accordion with gradient background MDB Pro component

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

        
            
          <div class="row d-flex justify-content-center purple-gradient">
            <div class="col-md-10 col-xl-6 py-5">
              <mdb-accordion [multiple]="false">
                <mdb-accordion-item [collapsed]="false" [customClass]="'bg-transparent border-0'">
                  <mdb-accordion-item-head [customClass]="'border-0 rgba-stylish-strong z-depth-1 white-text'">#1
                  </mdb-accordion-item-head>
                  <mdb-accordion-item-body [customClass]="'rgba-grey-light white-text'">
                    <p class="py-3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, veniam ducimus, quasi
                      repudiandae animi temporibus
                      sit modi sunt perspiciatis eius cumque, tempore dolore voluptatem molestias facilis? Molestiae cum
                      quis dicta.</p>
                  </mdb-accordion-item-body>
                </mdb-accordion-item>

                <mdb-accordion-item [customClass]="'bg-transparent border-0'">
                  <mdb-accordion-item-head [customClass]="'border-0 rgba-stylish-strong z-depth-1 white-text'">#2
                  </mdb-accordion-item-head>
                  <mdb-accordion-item-body [customClass]="'rgba-grey-light white-text'">
                    <p class="py-3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, veniam ducimus, quasi
                      repudiandae animi temporibus
                      sit modi sunt perspiciatis eius cumque, tempore dolore voluptatem molestias facilis? Molestiae cum
                      quis dicta.</p>
                  </mdb-accordion-item-body>
                </mdb-accordion-item>

                <mdb-accordion-item [customClass]="'bg-transparent border-0'">
                  <mdb-accordion-item-head [customClass]="'border-0 rgba-stylish-strong z-depth-1 white-text'">#3
                  </mdb-accordion-item-head>
                  <mdb-accordion-item-body [customClass]="'rgba-grey-light white-text'">
                    <p class="py-3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, veniam ducimus, quasi
                      repudiandae animi temporibus
                      sit modi sunt perspiciatis eius cumque, tempore dolore voluptatem molestias facilis? Molestiae cum
                      quis dicta.</p>
                  </mdb-accordion-item-body>
                </mdb-accordion-item>
              </mdb-accordion>
            </div>
          </div>
        
        
    

Accordion without arrow indicator MDB Pro component

Add [indicator]="false" input to mdb-accordion-item-head to remove arrow indicator from accordion heading.

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.
        
            
          <mdb-accordion>
            <mdb-accordion-item>
              <mdb-accordion-item-head [indicator]="false">Collapsible Group Item #1</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                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.
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item>
              <mdb-accordion-item-head [indicator]="false">Collapsible Group Item #2</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                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.
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item>
              <mdb-accordion-item-head [indicator]="false">Collapsible Group Item #3</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                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.
              </mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
        
        
    

Accordion with picture MDB Pro component

Hi! I am the first one.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Hi! I am the second one.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Hi! I am the third one.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

        
            
          <mdb-accordion>
            <mdb-accordion-item [collapsed]="false" [customClass]="'border-0'">
              <mdb-accordion-item-head [customClass]="'blue lighten-3 z-depth-1 white-text text-uppercase'">First accordion item</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <div class="row my-4">
                  <div class="col-md-8">
                    <h2 class="font-weight-bold mb-3 black-text">Hi! I am the first one.</h2>
                    <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                    <p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                  </div>
                  <div class="col-md-4 mt-3 pt-2">
                    <div class="view z-depth-1">
                      <img src="https://mdbootstrap.com/img/Photos/Others/nature.webp" alt="" class="img-fluid">
                    </div>
                  </div>
                </div>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item [customClass]="'border-0'">
              <mdb-accordion-item-head [customClass]="'blue lighten-3 z-depth-1 white-text text-uppercase'">Second accordion item</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <div class="row my-4">
                  <div class="col-md-8">
                    <h2 class="font-weight-bold mb-3 black-text">Hi! I am the second one.</h2>
                    <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                    <p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                  </div>
                  <div class="col-md-4 mt-3 pt-2">
                    <div class="view z-depth-1">
                      <img src="https://mdbootstrap.com/img/Photos/Others/nature.webp" alt="" class="img-fluid">
                    </div>
                  </div>
                </div>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item [customClass]="'border-0'">
              <mdb-accordion-item-head [customClass]="'blue lighten-3 z-depth-1 white-text text-uppercase'">Third accordion item</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <div class="row my-4">
                  <div class="col-md-8">
                    <h2 class="font-weight-bold mb-3 black-text">Hi! I am the third one.</h2>
                    <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                    <p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                  </div>
                  <div class="col-md-4 mt-3 pt-2">
                    <div class="view z-depth-1">
                      <img src="https://mdbootstrap.com/img/Photos/Others/nature.webp" alt="" class="img-fluid">
                    </div>
                  </div>
                </div>
              </mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
        
        
    

Accordion with icons MDB Pro component

Hello my friends, I am the nicest 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.

        
            
          <mdb-accordion>
            <ul class="list-unstyled d-flex justify-content-center pt-5 red-text">
                <li><i class="fas fa-anchor mr-3 fa-2x" aria-hidden="true"></i></li>
                <li><i class="far fa-life-ring mr-3 fa-2x" aria-hidden="true"></i></li>
                <li><i class="far fa-star fa-2x" aria-hidden="true"></i></li>
            </ul>

            <h2 class="text-center text-uppercase red-text py-4 px-3">Hello my friends, I am the nicest accordion!</h2>

            <hr class="mb-0">
            <mdb-accordion-item [collapsed]="false">
              <mdb-accordion-item-head [customClass]="'red-text'">How awesome accordion I am?</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                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.
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item>
              <mdb-accordion-item-head [customClass]="'red-text'">You're the greatest accordion!</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                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.
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item>
              <mdb-accordion-item-head [customClass]="'red-text'">Thank you my dear!</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                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.
              </mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
        
        
    

Accordion with teal cards MDB Pro component

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.

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.

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.

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.

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.

        
            
          <mdb-accordion>
            <mdb-accordion-item [collapsed]="false" [customClass]="'border-0'">
              <mdb-accordion-item-head [indicator]="false" [customClass]="'text-center text-uppercase black-text teal lighten-4 z-depth-1'">
                First title
              </mdb-accordion-item-head>
              <mdb-accordion-item-body [customClass]="'rgba-teal-strong white-text'">
                <p class="py-2">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.
                </p>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item [customClass]="'border-0'">
              <mdb-accordion-item-head [indicator]="false" [customClass]="'text-center text-uppercase black-text teal lighten-3 z-depth-1'">
                Second title
              </mdb-accordion-item-head>
              <mdb-accordion-item-body [customClass]="'rgba-teal-strong white-text'">
                <p class="py-2">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.
                </p>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item [customClass]="'border-0'">
              <mdb-accordion-item-head [indicator]="false" [customClass]="'text-center text-uppercase black-text teal lighten-2 z-depth-1'">
                Third title
              </mdb-accordion-item-head>
              <mdb-accordion-item-body [customClass]="'rgba-teal-strong white-text'">
                <p class="py-2">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.
                </p>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item [customClass]="'border-0'">
              <mdb-accordion-item-head [indicator]="false" [customClass]="'text-center text-uppercase black-text teal lighten-1 z-depth-1'">
                Fourth title
              </mdb-accordion-item-head>
              <mdb-accordion-item-body [customClass]="'rgba-teal-strong white-text'">
                <p class="py-2">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.
                </p>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item [customClass]="'border-0'">
              <mdb-accordion-item-head [indicator]="false" [customClass]="'text-center text-uppercase black-text teal z-depth-1'">
                Fifth title
              </mdb-accordion-item-head>
              <mdb-accordion-item-body [customClass]="'rgba-teal-strong white-text'">
                <p class="py-2">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.
                </p>
              </mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
        
        
    

Accordion with a table MDB Pro component

Name Condition Last edited
Test subscription Scroll % equals or greater than 80 12.06.2017
Product Hunt Visitor Scroll % equals or greater than 80 13.06.2017
Test subscription Scroll % equals or greater than 80 12.06.2017
Name Condition Last edited
Test subscription Scroll % equals or greater than 80 12.06.2017
Product Hunt Visitor Scroll % equals or greater than 80 13.06.2017
Test subscription Scroll % equals or greater than 80 12.06.2017
Name Condition Last edited
Test subscription Scroll % equals or greater than 80 12.06.2017
Product Hunt Visitor Scroll % equals or greater than 80 13.06.2017
Test subscription Scroll % equals or greater than 80 12.06.2017
        
            
          <mdb-accordion>
            <mdb-accordion-item>
              <mdb-accordion-item-head [customClass]="'blue-text'">Folder 1</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <!--Top Table UI-->
                <div class="table-ui p-2 mb-3 mx-3 mb-4">

                  <!--Grid row-->
                  <div class="row">

                    <!--Grid column-->
                    <div class="col-xl-4 col-lg-6 col-md-12">

                      <!--Name-->
                      <mdb-select [options]="optionsSelect1" placeholder="Bulk actions" class="colorful-select dropdown-primary"></mdb-select>

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-xl-4 col-lg-6 col-md-6">

                      <!--Blue select-->
                      <mdb-select [options]="optionsSelect2" placeholder="Show only" class="colorful-select dropdown-primary"></mdb-select>
                      <!--/Blue select-->

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-xl-4 col-lg-6 col-md-6">

                      <!--Blue select-->
                      <mdb-select [options]="optionsSelect3" placeholder="Filter" class="colorful-select dropdown-primary"></mdb-select>
                      <!--/Blue select-->

                    </div>
                    <!--Grid column-->

                  </div>
                  <!--Grid row-->

                </div>
                <!--Top Table UI-->

                <!-- Table responsive wrapper -->
                <div class="table-responsive mx-3">
                  <!--Table-->
                  <table class="table table-hover mb-0">

                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <th class="th-lg">
                          <a>Name
                            <i class="fas fa-sort ml-1"></i>
                          </a>
                        </th>
                        <th class="th-lg">
                          <a>Condition
                            <i class="fas fa-sort ml-1"></i>
                          </a>
                        </th>
                        <th class="th-lg">
                          <a>Last edited
                            <i class="fas fa-sort ml-1"></i>
                          </a>
                        </th>
                        <th></th>
                      </tr>
                    </thead>
                    <!--Table head-->

                    <!--Table body-->
                    <tbody>
                      <tr>
                        <th scope="row">
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <td>Test subscription</td>
                        <td>
                        Scroll % equals or greater than
                          <strong>80</strong>
                        </td>
                        <td>12.06.2017</td>
                        <td>
                          <a>
                            <i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
                          </a>
                          <a>
                            <i class="fas fa-pencil-alt-square mx-1"></i>
                          </a>
                          <a>
                            <i class="fas fa-times mx-1"></i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <td>Product Hunt Visitor</td>
                        <td>
                        Scroll % equals or greater than
                          <strong>80</strong>
                        </td>
                        <td>13.06.2017</td>
                        <td>
                          <a>
                            <i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
                          </a>
                          <a>
                            <i class="fas fa-pencil-alt-square mx-1"></i>
                          </a>
                          <a>
                            <i class="fas fa-times mx-1"></i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <td>Test subscription</td>
                        <td>
                        Scroll % equals or greater than
                          <strong>80</strong>
                        </td>
                        <td>12.06.2017</td>
                        <td>
                          <a>
                            <i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
                          </a>
                          <a>
                            <i class="fas fa-pencil-alt-square mx-1"></i>
                          </a>
                          <a>
                            <i class="fas fa-times mx-1"></i>
                          </a>
                        </td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div>
                <!-- Table responsive wrapper -->
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item>
              <mdb-accordion-item-head [customClass]="'blue-text'">Folder 2</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <!--Top Table UI-->
                <div class="table-ui p-2 mb-3 mx-3 mb-4">

                  <!--Grid row-->
                  <div class="row">

                    <!--Grid column-->
                    <div class="col-xl-4 col-lg-6 col-md-12">

                      <!--Name-->
                      <mdb-select [options]="optionsSelect1" placeholder="Bulk actions" class="colorful-select dropdown-primary"></mdb-select>

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-xl-4 col-lg-6 col-md-6">

                      <!--Blue select-->
                      <mdb-select [options]="optionsSelect2" placeholder="Show only" class="colorful-select dropdown-primary"></mdb-select>
                      <!--/Blue select-->

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-xl-4 col-lg-6 col-md-6">

                      <!--Blue select-->
                      <mdb-select [options]="optionsSelect3" placeholder="Filter" class="colorful-select dropdown-primary"></mdb-select>
                      <!--/Blue select-->

                    </div>
                    <!--Grid column-->

                  </div>
                  <!--Grid row-->

                </div>
                <!--Top Table UI-->

                <!-- Table responsive wrapper -->
                <div class="table-responsive mx-3">
                  <!--Table-->
                  <table class="table table-hover mb-0">

                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <th class="th-lg">
                          <a>Name
                            <i class="fas fa-sort ml-1"></i>
                          </a>
                        </th>
                        <th class="th-lg">
                          <a>Condition
                            <i class="fas fa-sort ml-1"></i>
                          </a>
                        </th>
                        <th class="th-lg">
                          <a>Last edited
                            <i class="fas fa-sort ml-1"></i>
                          </a>
                        </th>
                        <th></th>
                      </tr>
                    </thead>
                    <!--Table head-->

                    <!--Table body-->
                    <tbody>
                      <tr>
                        <th scope="row">
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <td>Test subscription</td>
                        <td>
                        Scroll % equals or greater than
                          <strong>80</strong>
                        </td>
                        <td>12.06.2017</td>
                        <td>
                          <a>
                            <i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
                          </a>
                          <a>
                            <i class="fas fa-pencil-alt-square mx-1"></i>
                          </a>
                          <a>
                            <i class="fas fa-times mx-1"></i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <td>Product Hunt Visitor</td>
                        <td>
                        Scroll % equals or greater than
                          <strong>80</strong>
                        </td>
                        <td>13.06.2017</td>
                        <td>
                          <a>
                            <i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
                          </a>
                          <a>
                            <i class="fas fa-pencil-alt-square mx-1"></i>
                          </a>
                          <a>
                            <i class="fas fa-times mx-1"></i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <td>Test subscription</td>
                        <td>
                        Scroll % equals or greater than
                          <strong>80</strong>
                        </td>
                        <td>12.06.2017</td>
                        <td>
                          <a>
                            <i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
                          </a>
                          <a>
                            <i class="fas fa-pencil-alt-square mx-1"></i>
                          </a>
                          <a>
                            <i class="fas fa-times mx-1"></i>
                          </a>
                        </td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div>
                <!-- Table responsive wrapper -->
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item>
              <mdb-accordion-item-head [customClass]="'blue-text'">Folder 3</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <!--Top Table UI-->
                <div class="table-ui p-2 mb-3 mx-3 mb-4">

                  <!--Grid row-->
                  <div class="row">

                    <!--Grid column-->
                    <div class="col-xl-4 col-lg-6 col-md-12">

                      <!--Name-->
                      <mdb-select [options]="optionsSelect1" placeholder="Bulk actions" class="colorful-select dropdown-primary"></mdb-select>

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-xl-4 col-lg-6 col-md-6">

                      <!--Blue select-->
                      <mdb-select [options]="optionsSelect2" placeholder="Show only" class="colorful-select dropdown-primary"></mdb-select>
                      <!--/Blue select-->

                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-xl-4 col-lg-6 col-md-6">

                      <!--Blue select-->
                      <mdb-select [options]="optionsSelect3" placeholder="Filter" class="colorful-select dropdown-primary"></mdb-select>
                      <!--/Blue select-->

                    </div>
                    <!--Grid column-->

                  </div>
                  <!--Grid row-->

                </div>
                <!--Top Table UI-->

                <!-- Table responsive wrapper -->
                <div class="table-responsive mx-3">
                  <!--Table-->
                  <table class="table table-hover mb-0">

                    <!--Table head-->
                    <thead>
                      <tr>
                        <th>
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <th class="th-lg">
                          <a>Name
                            <i class="fas fa-sort ml-1"></i>
                          </a>
                        </th>
                        <th class="th-lg">
                          <a>Condition
                            <i class="fas fa-sort ml-1"></i>
                          </a>
                        </th>
                        <th class="th-lg">
                          <a>Last edited
                            <i class="fas fa-sort ml-1"></i>
                          </a>
                        </th>
                        <th></th>
                      </tr>
                    </thead>
                    <!--Table head-->

                    <!--Table body-->
                    <tbody>
                      <tr>
                        <th scope="row">
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <td>Test subscription</td>
                        <td>
                        Scroll % equals or greater than
                          <strong>80</strong>
                        </td>
                        <td>12.06.2017</td>
                        <td>
                          <a>
                            <i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
                          </a>
                          <a>
                            <i class="fas fa-pencil-alt-square mx-1"></i>
                          </a>
                          <a>
                            <i class="fas fa-times mx-1"></i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <td>Product Hunt Visitor</td>
                        <td>
                        Scroll % equals or greater than
                          <strong>80</strong>
                        </td>
                        <td>13.06.2017</td>
                        <td>
                          <a>
                            <i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
                          </a>
                          <a>
                            <i class="fas fa-pencil-alt-square mx-1"></i>
                          </a>
                          <a>
                            <i class="fas fa-times mx-1"></i>
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">
                          <mdb-checkbox></mdb-checkbox>
                        </th>
                        <td>Test subscription</td>
                        <td>
                        Scroll % equals or greater than
                          <strong>80</strong>
                        </td>
                        <td>12.06.2017</td>
                        <td>
                          <a>
                            <i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
                          </a>
                          <a>
                            <i class="fas fa-pencil-alt-square mx-1"></i>
                          </a>
                          <a>
                            <i class="fas fa-times mx-1"></i>
                          </a>
                        </td>
                      </tr>
                    </tbody>
                    <!--Table body-->
                  </table>
                  <!--Table-->
                </div>
                <!-- Table responsive wrapper -->
              </mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
        
        
    
        
            
          import { Component } from '@angular/core';

          @Component({
            selector: 'accordion-table',
            templateUrl: './accordion-table.html'
          })
          export class AccordionTableComponent {
            optionsSelect1 = [
              { value: '1', label: 'Delete' },
              { value: '2', label: 'Change folder' }
            ];

            optionsSelect2 = [
              { value: '1', label: 'All (2000)' },
              { value: '2', label: 'Click (200)' },
              { value: '2', label: 'Page (1800)' },
              { value: '2', label: 'Scroll (200)' },
              { value: '2', label: 'Forms (50)' },
              { value: '2', label: 'Time (50)' },
              { value: '2', label: 'UTM (50)' }
            ];

            optionsSelect3 = [
              { value: '1', label: 'All (100)' },
              { value: '2', label: 'Active (2000)' },
              { value: '2', label: 'Inactive (1000)' }
            ];
          }
        
        
    

Changing icon MDB Pro component

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.
        
            
          <mdb-accordion [multiple]="true">
            <mdb-accordion-item [collapsed]="false">
              <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                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.
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item>
              <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                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.
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <mdb-accordion-item>
              <mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                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.
              </mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
        
        
    
        
            
          mdb-accordion .mdb-accordion-indicator::after {
            font-family: "Font Awesome 5 Free";
            content: "\f095";
            font-weight: 900;
            transform: unset;
            border: 0;
          }