Accordion

An accessible way for the user to expand and collapse content.

install	version	usage
yarn add @ciceksepeti/cui-accordion	1.0.0	import {`Accordion, AccordionHeader, AccordionButton, AccordionContent`} from '@ciceksepeti/cui-accordion'

Wai-AriaW3

RepositoryGitHub

PackageNPM

Content

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

An accordion element consists of an AccordionHeader that has AccordionButton inside itself and AccordionContent that keep your content. Cactus UI provides Accordion component to group them.

Examples

Default

Example of a default behavior of Accordion component.

import React from 'react';
import {
  Accordion,
  AccordionHeader,
  AccordionButton,
  AccordionContent,
} from '@ciceksepeti/cui-accordion';

function Demo() {
  return (
    <Accordion>
      <AccordionHeader>
        <AccordionButton>Step 1</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 1: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton disabled>Step 2</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 2: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 3</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 3: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
    </Accordion>
  );
}

Accordion Default Preview

Single

Example of a single behavior of Accordion component. single={false} means that you can open more than one section at a time.

import React from 'react';
import {
  Accordion,
  AccordionHeader,
  AccordionButton,
  AccordionContent,
} from '@ciceksepeti/cui-accordion';

function Demo() {
  return (
    <Accordion single={false}>
      <AccordionHeader>
        <AccordionButton>Step 1</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 1: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton disabled>Step 2</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 2: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 3</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 3: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
    </Accordion>
  );
}

Accordion Single Behavior Preview

Collapsible

Example of a collapsible behavior of Accordion component. collapsible={false} prevent the user from closing the section that is expanded.

import React from 'react';
import {
  Accordion,
  AccordionHeader,
  AccordionButton,
  AccordionContent,
} from '@ciceksepeti/cui-accordion';

function Demo() {
  return (
    <Accordion collapsible={false}>
      <AccordionHeader>
        <AccordionButton>Step 1</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 1: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton disabled>Step 2</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 2: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 3</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 3: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </AccordionContent>
    </Accordion>
  );
}

Accordion Collapsible Behavior Preview

Default Indexes

Example of a using indexes prop of Accordion component. defaultIndexes={[Some index here]} allows users to set sections that expanded initially. defaultIndexes prop is a way to create an uncontrolled accordion component.

import React from 'react';
import {
  Accordion,
  AccordionHeader,
  AccordionButton,
  AccordionContent,
} from '@ciceksepeti/cui-accordion';

function Demo() {
  return (
    <Accordion defaultIndexes={[1, 3]}>
      <AccordionHeader>
        <AccordionButton>Step 1</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 1: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton disabled>Step 2</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 2: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 3</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 3: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 4</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 4: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 5</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 5: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
    </Accordion>
  );
}

Accordion Default Indexes Behavior Preview

Indexes

Example of a using indexes prop of Accordion component. indexes={[Some index here]} allows users to set sections that expanded initially. Indexes prop must be used with onChange event to accordion work properly.

import React from 'react';
import {
  Accordion,
  AccordionHeader,
  AccordionButton,
  AccordionContent,
} from '@ciceksepeti/cui-accordion';

function Demo() {
  return (
    <Accordion indexes={[0, 2, 4]}>
      <AccordionHeader>
        <AccordionButton>Step 1</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 1: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton disabled>Step 2</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 2: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 3</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 3: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 4</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 4: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
      <AccordionHeader>
        <AccordionButton>Step 5</AccordionButton>
      </AccordionHeader>
      <AccordionContent>
        Step 5: Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </AccordionContent>
    </Accordion>
  );
}

Accordion Indexes Behavior Preview

Props

Accordion Props

Name	Type	Default	Required	Description
single	boolean	true	-	Set to false to allow only multi section to be open at a time.
collapsible	boolean	true	-	Set to false to disable collapsing of sections.
disableOptionalArrowKeys	boolean	false	-	Set to true to disable the use of the arrow keys to navigate between sections.
indexes	number[]	-	-	An array of indexes of the sections that are open by default. This prop allows creating a controlled component and must be used with the onChange event.
defaultIndexes	number[]	-	-	An array of indexes of the sections that are open by default. This prop allows creating an uncontrolled component.
children	React.ReactNode	-	required	Element shown as Accordion. As default, Accordion accepts AccordionHeader and AccordionContent as children.
as	string	div	-	Changes html tag of accordion component which renders to DOM

Accordion Events

Name	Type	Description
onChange	(index: number) => void	A callback function that is called when a section is opened or closed. This event must be used with the indexes prop to create a controlled accordion.

AccordionHeader Props

Name	Type	Default	Required	Description
as	string	h3	-	Changes html tag of accordion header component which renders to DOM
children	React.ReactNode	-	required	Element shown as Accordion Header. As default, Accordion Header accepts AccordionButton as children.

AccordionButton Props

Name	Type	Default	Required	Description
as	string	button	-	Changes html tag of accordion button component which renders to DOM
children	React.ReactNode	-	required	Element shown as Accordion Button.

Playground

Styling

tip

To learn more about selectors please visit the CSS Selector Reference page.

Name	Type
[data-cui-accordion]	Element Selector
[data-cui-accordion-header]	Element Selector
[data-cui-accordion-button]	Element Selector
[data-cui-accordion-content]	Element Selector
[data-cui-accordion-button][aria-expanded='true']	Element Selector
[data-cui-accordion-button][aria-disabled='true']	Element Selector
[data-cui-accordion-content][data-expanded='true']	Element Selector

Accordion

Content​

Examples​

Default​

Step 1

Step 2

Step 3

Single​

Step 1

Step 2

Step 3

Collapsible​

Step 1

Step 2

Step 3

Default Indexes​

Step 1

Step 2

Step 3

Step 4

Step 5

Indexes​

Step 1

Step 2

Step 3

Step 4

Step 5

Props​

Accordion Props​

Accordion Props

Accordion Props

Accordion Events​

Accordion Events

Accordion Events

AccordionHeader Props​

AccordionHeader Props

AccordionHeader Props

AccordionButton Props​

AccordionButton Props

AccordionButton Props

Playground​

Styling​

Content

Examples

Default

Single

Collapsible

Default Indexes

Indexes

Props

Accordion Props

Accordion Events

AccordionHeader Props

AccordionButton Props

Playground

Styling