Thursday, 12 July, 2018 UTC

Summary

Ahhhhh, the accordion. I’m not talking about Weird Al’s instrument of choice, but the graphical control element. Do you have too much content on a page? An accordion allows you to break things up into smaller chunks that your end-users can toggle open and close by clicking.

Similar to a tabs component, an accordion component is comprised of different sections that can be toggled to be open and closed. Unlike a tabs component, accordions can support displaying multiple sections of content at the same time.

In this article, you will learn how to create a simple reusable accordion component with sections that can be toggled open and closed. We will then expand the component to support having multiple sections opened at once and specifying which sections should be open by default.

We will be creating three components:

Accordion which will hold our section components and manage which sections are open and closed.

AccordionSection which will display the clickable section title, the section contents when the section is open, and report back to the Accordion about click events.

App component to tie everything together into a working example!

The sections inside of the Accordion component will simply be <div> tags that will receive a label attribute that will be used for the clickable region inside of the AccordionSection component.

This component will receive a label property that will create the clickable title of the section. The onClick event handler property is used to report back to the parent component if the label has been clicked.

The parent component will handle keeping track of which sections are opened or closed and feeds the status back to AccordionSection as a boolean property, isOpen.

Any child components of AccordionSection will be displayed only if the section has been toggled to open and the property isOpen is true.

Now that we have a component for our sections, we need a component that will house these sections and manage the state of which sections have been opened or closed:

Usual boilerplate code. The Accordion contains two sections that, upon being clicked open, will display some facts about different species of alligators.

Everything we have created thus far is usable, but somewhat limited as only a single section can be open at a time, and every section is collapsed by default.

To add support for multiple sections being open at the same time, we’re going to add a property named allowMultipleOpen to the Accordion component which will be used tell the accordion if it should allow multiple sections to be open.

When enabled, the state will toggle individual keys true/false instead of completely overwriting the state with the section that was interacted with.

While we’re in there, we can add some additional logic to check the child nodes for an isOpen property. When present, the open state will be initialized with the section being marked as open already:

With our Accordion ready to accept new parameters, we can update our App component to pass in the property to allow multiple sections to be open as well as flagging the first section to be open by default: