Accordion

Accordion is a component which organizes content within collapsable items. Accordion allows showing only one collapsed item 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 Bootstrap Accordion use:

• FAQ page

• Multiple items presentation

• Data tables

Default Accordion

import React from "react";
import { CDBAccordion, CDBContainer } from "cdbreact";
export const Accordion = () => {
  const data = [
      {
        title: "Accordion 1",
        content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                  aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.`,
      },
      {
        title: "Accordion 2",
        content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                  aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.`,
      },
      {
        title: "Accordion 3",
        content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                  aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.`,
      },
      {
        title: "Accordion 4",
        content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                  aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.`,
      },
  ];
  return (
    <CDBContainer>
          <CDBAccordion data={data} />
    </CDBContainer>
  );
};

Accordion without Icon

import React from "react";
import { CDBAccordion, CDBContainer } from "cdbreact";
export const Accordion = () => {
  const data = [
      {
        title: "Accordion 1",
        content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                  aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.`,
      },
      {
        title: "Accordion 2",
        content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                  aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.`,
      },
      {
        title: "Accordion 3",
        content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                  aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.`,
      },
      {
        title: "Accordion 4",
        content: `Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
                  richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
                  dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
                  moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                  assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
                  wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                  butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                  aesthetic synth nesciunt you probably haven't heard of them accusamus
                  labore sustainable VHS.`,
      },
  ];
  return (
    <CDBContainer>
          <CDBAccordion data={data} hideIcon />
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the Accordion component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Accordion Import Statement

You need to import the Contrast Accordion component first before using it.

import { CDBAccordion } from "cdbreact";

API Reference: Contrast Accordion Properties

The table below shows the configuration options of the CDBAccordion component.