Accordion: React

An accordion component is a list of items, allowing each item’s content to be expanded and collapsed by clicking its header.

OverviewReactSwiftKotlin

Installation

Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.

With that done, you’re now ready to implement the component in your application.

import { Accordion, AccordionItem } from '@mediahuis/chameleon-react';

export default function Example() {
  return (
    <Accordion>
      <AccordionItem title="Item 1">Content of item 1</AccordionItem>
      <AccordionItem title="Item 2">Content of item 2</AccordionItem>
    </Accordion>
  );
}

Accordion Properties

Property	Type	Default	Required	Description
collapsible	Boolean	-	No	Whether or not clicking an `AccordionItem` can collapse it again.
className	String	-	No	Additional class names to apply to the Accordion
id	String	-	Yes	The Accordion's id (Needed for a11y implementation)
initialExpandedIndex	Number	-1	No	To specify a particular item to be in an open state on initial render, provide the index of the item to this prop. Use -1 to indicate that no items should be expanded initially.
onChange	Function	-	No	This callback function is triggered when an `AccordionItem` is expanded or collapsed. The function is passed the index of the item that has been interacted with.

AccordionItem Properties

Property	Type	Default	Required	Description
children	ReactNode	-	No	Represents the body content of the `AccordionItem`. The content placed here will be visible when the item is expanded.
className	String	-	No	Additional class names to apply to the AccordionItem.
expanded	Boolean	-	No	Indicates whether the panel body is visible or hidden.
focused	Boolean	-	No	When this is set to `true`, the component will automatically set focus on itself.
id	String	-	No	A unique id for a11y reasons.
index	Number	-	No	Represents the index of the item within the Accordion component.
onClick	Function	-	No	This event is fired when the header of the AccordionItem is clicked.
onFocus	Function	-	No	This event is fired when the header of the AccordionItem receives focus.
onKeyDown	Function	-	No	This event is fired when a key is pressed, typically used for arrow navigation within the AccordionItem.
title	String	-	No	Represents the title within the header of the AccordionItem.

• Installation
• Accordion Properties
• AccordionItem Properties