Accordion

Bootstrap Accordion is a component which organizes content within collapsable items. Accordion shows only one collapsed item per time.

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

Examples of Bootstrap Accordion use case:

• Data tables

• Multiple items presentation

• FAQ page

Examples

Default Accordion example.

Script

      [].slice
        .call(document.querySelectorAll('[role=cdb-accordion]'))
        .forEach(progress => {
          new CDB.Accordion(progress);
        });

HTML

        <div role="cdb-accordion" class="cdb-accordion">
          <div class="accordion">
            <h2 class="accordion-header">Accordion 1</h2>
            <div class="accordion-panel">
              Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum
              dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
              amet, consectetur adipisicing elit. Distinctio quia error dicta
              molestias vel ab cum incidunt. Nam saepe, quae soluta maiores quas
              illo nulla? Est id placeat iusto sunt?
            </div>
          </div>
          <div class="accordion">
            <h2 class="accordion-header">Accordion 2</h2>
            <div class="accordion-panel">
              Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem Lorem
              ipsum, dolor sit amet consectetur adipisicing elit. Quos rem a,
              quo dignissimos ullam modi sunt quibusdam, aut enim sed non
              similique vel nemo, labore doloremque quisquam expedita
              voluptatum. Hic?
            </div>
          </div>
          <div class="accordion">
            <h2 class="accordion-header">Accordion 3</h2>
            <div class="accordion-panel">
              Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum
              dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
              amet consectetur adipisicing elit. Aspernatur hic dicta laboriosam
              culpa totam quae, voluptate at doloremque, eaque porro ipsam
              suscipit exercitationem vitae, repellendus ex distinctio autem
              velit eos.
            </div>
          </div>
          <div class="accordion">
            <h2 class="accordion-header">Accordion 4</h2>
            <div class="accordion-panel">
              Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum
              dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
              amet consectetur, adipisicing elit. Reprehenderit, rerum. Eligendi
              est atque, ipsum error nostrum nihil? Atque voluptatum eaque
              veniam culpa doloremque explicabo accusamus, mollitia, facilis
              odio qui consequuntur.
            </div>
          </div>
        </div>

Accordion without Icon

Script

      [].slice
        .call(document.querySelectorAll('[role=cdb-accordion]'))
        .forEach(progress => {
          new CDB.Accordion(progress);
        });

HTML

        <div role="cdb-accordion" class="cdb-accordion">
          <div class="accordion">
            <h2 class="accordion-header no-icon">Accordion 1</h2>
            <div class="accordion-panel">
              Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum
              dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
              amet, consectetur adipisicing elit. Distinctio quia error dicta
              molestias vel ab cum incidunt. Nam saepe, quae soluta maiores quas
              illo nulla? Est id placeat iusto sunt?
            </div>
          </div>
          <div class="accordion">
            <h2 class="accordion-header no-icon">Accordion 2</h2>
            <div class="accordion-panel">
              Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem Lorem
              ipsum, dolor sit amet consectetur adipisicing elit. Quos rem a,
              quo dignissimos ullam modi sunt quibusdam, aut enim sed non
              similique vel nemo, labore doloremque quisquam expedita
              voluptatum. Hic?
            </div>
          </div>
          <div class="accordion">
            <h2 class="accordion-header no-icon">Accordion 3</h2>
            <div class="accordion-panel">
              Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum
              dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
              amet consectetur adipisicing elit. Aspernatur hic dicta laboriosam
              culpa totam quae, voluptate at doloremque, eaque porro ipsam
              suscipit exercitationem vitae, repellendus ex distinctio autem
              velit eos.
            </div>
          </div>
          <div class="accordion">
            <h2 class="accordion-header no-icon">Accordion 4</h2>
            <div class="accordion-panel">
              Nulla et sodales nisl. Nam auctor quis odio eu congue. Lorem ipsum
              dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
              amet consectetur, adipisicing elit. Reprehenderit, rerum. Eligendi
              est atque, ipsum error nostrum nihil? Atque voluptatum eaque
              veniam culpa doloremque explicabo accusamus, mollitia, facilis
              odio qui consequuntur.
            </div>
          </div>
        </div>
      </div>

Usage

Here in this section you will find information about required modules and available inputs, outputs, methods and events of the accordion component.

Contrast Accordion Bootstrap Modules used

import {AccordionModule } from 'cdb';

API Reference: Contrast Accordion Bootstrap Inputs

The table below shows the possible inputs of the Accordion component.