Accordion

The Accordion component allows information to be displayed / hidden on a page behind a toggleable header.

Polymorphic Component

By default, content is rendered inside a <section>, but this can be overridden by passing any valid tag name or component with the as prop.

Examples

Basic Accordion

An Accordion has two sizes on desktop, and one on mobile devices. The content can be any size.

import { Accordion } from '@curology/ui-components-web/react/Accordion';
import { AccordionContent } from '@curology/ui-components-web/react/Accordion/AccordionContent';
import { AccordionSummary } from '@curology/ui-components-web/react/Accordion/AccordionSummary';

<Accordion defaultOpen size="{md(default)|lg}">
  <AccordionSummary>
    ...
  </AccordionSummary>
  <AccordionContent>
    ...
  </AccordionContent>
</Accordion>

Nested Accordion

Also available in two sizes, the "nested" accordion is meant to be used inside of another accordion. It is not simply an alternate treatment.

import { Accordion } from '@curology/ui-components-web/react/Accordion';
import { AccordionContent } from '@curology/ui-components-web/react/Accordion/AccordionContent';
import { AccordionSummary } from '@curology/ui-components-web/react/Accordion/AccordionSummary';

<Accordion type="nested" defaultOpen size="{md(default)|lg}">
  <AccordionSummary>
    ...
  </AccordionSummary>
  <AccordionContent>
    ...
  </AccordionContent>
</Accordion>

Controlled Accordion

The open/closed state of the Accordion can be set programmatically using the open and onToggle props.

import { Accordion } from '@curology/ui-components-web/react/Accordion';
import { AccordionContent } from '@curology/ui-components-web/react/Accordion/AccordionContent';
import { AccordionSummary } from '@curology/ui-components-web/react/Accordion/AccordionSummary';

<Accordion 
  open={isOpen} 
  onToggle={(shouldOpen) => setIsOpen(shouldOpen)}
>
  ...
</Accordion>

Props

AccordionProps

Name	Type	Default Value	Required	Description
All attributes of a <section />
defaultOpen	false | true	false	No	Should the uncontrolled Accordion default to open?
onToggle	(open: boolean) => void		No	Fires when the open/closed state of the Accordion changes.
open	false | true	false	No	Should the controlled Accordion be open?
size	"md" | "lg"	'md'	No	What size to render the accordion title
type	"default" | "nested"		No	Which style of accordion should be rendered?

AccordionSummaryProps

Name	Type	Default Value	Required	Description
All attributes of a <div />

AccordionContentProps

Name	Type	Default Value	Required	Description
All attributes of a <div />