Accordion Panel

Overview

Accordion panels are containers for content of relative importance to the user that can be selectively expanded or collapsed. They can be useful for reducing the content on a page & the cognitive load for the user.

An accordion panel can display different types of content such as text, images, tables, media, buttons, etc. Components are added into the drop zone and render when the user expands the corresponding panel.

When to use:

On similar or redundant information that must be presented together
Step-by-step or sequential processes

Implementation

Edit the code below to see your changes live!

function Example() {
  const { panels } = useAccordionPanel([
    {
      defaultExpanded: true,
      header: 'Panel Header',
      children: (
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit
          libero volutpat. Eu lobortis elementum nibh tellus molestie nunc non.
        </Text>
      ),
    },
    {
      header: 'Panel Header',
      children: (
        <Text>
          Nullam eleifend a lectus non consequat. Fusce non mauris at velit sodales
          venenatis vitae ut erat. In hac habitasse platea dictumst. Quisque venenatis
          turpis at dapibus posuere. Phasellus pulvinar velit id tellus luctus, ac
          pharetra libero consequat.
        </Text>
      ),
    },
  ]);

  return <AccordionPanel header="Accordion Panel Header" panels={panels} />;
}

function Example() {
  const { panels } = useAccordionPanel([
    {
      defaultExpanded: true,
      header: 'Panel Header',
      children: (
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Pulvinar mattis nunc sed blandit
          libero volutpat. Eu lobortis elementum nibh tellus molestie nunc non.
        </Text>
      ),
    },
    {
      header: 'Panel Header',
      children: (
        <Text>
          Nullam eleifend a lectus non consequat. Fusce non mauris at velit sodales
          venenatis vitae ut erat. In hac habitasse platea dictumst. Quisque venenatis
          turpis at dapibus posuere. Phasellus pulvinar velit id tellus luctus, ac
          pharetra libero consequat.
        </Text>
      ),
    },
  ]);

  return <AccordionPanel header="Accordion Panel Header" panels={panels} />;
}

Props

Prop name	Type	Default	Description
`panels` *	`AccordionProps[]`		See Accordion for usage.
`header` *	`string`		Defines the `Accordion Panel` header text

Props ending with * are required

Do's and Don'ts

Do
Choose meaningful headers that describe the content revealed on expand.
Use the icon prop sparingly; an appropriate use would be the status of a task hidden in the accordion.
Use accordions to present parallel content or like items.
Limit the number of tasks hidden in each accordion to one.
Start with all panels collapsed unless the user has been redirected to the content.

Don't
Do not use accordions to hide important user tasks.
Do not use the icon prop unless it provides benefit to the user.
Do not nest accordions within accordions.
Do not use an accordion to hide a singular piece of content.

Beta