@ausbom/accordion

Accordions are a list of sections that allow users to show or hide related content.

Try Accordion

Why

Accordions give quick access to options of content that are relevant to them.

When

Use accordions when you want to:

• Give users options from a list of related items.
• To shorten the page by condensing content into collapsable sections.
• Choose between information in one place rather than on seperate pages.

How

Behaviour

Accordions should start with all sections closed. To open a section, select anywhere in the item button.

Users should be in control of the accordion state. If an accordion item is open when another accordion item is selected, then the original accordion item stays open.

Do

• Always use an accordion for a list of related items.
• Indicate an open accordion by changing the direction of the chevron (to point up) and the borders of the open accordion are blue.
• Use the same text style for all accordion headings on a page or in a list.
• Consider if there are there more appropriate alternatives, such as using In page anchor or showing the content on different pages or tabs.

Do not

• Use an accordion for a single item.
• Use accordions for short sections of content. Use simple headings to seperate this content instead.
• Avoid using accordions to contain complex content such as graphs, tables or anything that might require horizontal scrolling.

Accessibility

Accordions need to be keyboard accessible as list items with a visible focus state.

Screen readers should read aloud all the text in the button as a single statement. There's also some visually hidden content in the heading text to help announce the call-to-action as "collapsed, button" or "expanded, button".

Installation

npm install @ausbom/accordion

API Docs

import Accordion, { AccordionItem } from '@ausbom/accordion'
import React from 'react'

<Accordion>
  <AccordionItem id="accordion-1" title="Lorem ipsum dolor">
    accordion-1 content
  </AccordionItem>
  <AccordionItem
    id="accordion-2"
    isOpen
    title="Lorem ipsum dolor sit amet"
  >
     accordion-2 content
  </AccordionItem>
  <AccordionItem id="accordion-3" title="Lorem ipsum">
     accordion-3 content
  </AccordionItem>
  <AccordionItem id="accordion-4" title="Lorem ipsum dolor">
     accordion-4 content
  </AccordionItem>
  <AccordionItem id="accordion-5" title="Lorem ipsum dolor" subTitle="Lorem ipsum sub title">
     accordion-5 content
  </AccordionItem>
</Accordion>