Accordion

@spartanfx/react v1.2.2

---

@spartanfx/react / index / Accordion

Variable: Accordion

const Accordion: React.FunctionComponent<React.PropsWithChildren<IAccordionProps>>;

A lightweight, animated accordion component.

Remarks

The accordion expands/collapses its children with a smooth height transition.
Styling is provided by Accordion.module.scss, but you can override the classes if you prefer.

Props

Required

Property	Type	Default	Description
title	string	-	The text shown next to the chevron.

Options

Property	Type	Default	Description
ariaLabel?	string	-	ARIA label for accessibility.
defaultOpen?	boolean	false	Whether the accordion starts in the open state. Ignored if staticMode is true
staticMode?	boolean	false	Whether the accordion is seen as a section. No expand or collapse in this mode - Expanded by default.

Appearance & theming

Property	Type	Default	Description
appearance?	AppearanceMode	AppearanceMode.light	Visual appearance mode - light or dark theme support
classes?	IAccordionClassNames	-	CSS class name overrides for component elements.
className?	string	-	Additional CSS class name for the root element.
style?	CSSProperties	-	Inline styles for the root element.
tokens?	IAccordionTokens	-	Design tokens for theming.

Full type reference: IAccordionProps

Example

Here is a minimal usage example that can be pasted into a Docusaurus page or MDX document:

    <>
       <Accordion title="Looking for a collapsible panel?">
         I’m a trusty accordion—click to reveal, click again to hide! (Starts closed.)
       </Accordion>

       <Accordion title="Prefer it open right away?" defaultOpen>
         I pop out of the box already expanded, but you can still tuck me away
         whenever you like.
       </Accordion>

       <Accordion title="Want a stylish static wrapper?" staticMode>
         I have the snazzy accordion look but stay permanently unfolded—
         a perfect, classy frame for your content.
       </Accordion>
    </>