Create Lightweight React Accordions

Amin Abdolrezapoor — Wed, 19 Jan 2022 19:50:06 +0000

I have created a very simple Accordion Component called accordionify for react which you can be used for creating collapsible sections. You can check demo here

Install Accordionify - Lightweight React accordion component

If you're using npm, just run:

npm i accordionify

and if you are using yarn, run:

yarn add accordionify

Create Accordion component

First of all, Accordions are usually consisted of a Toggle or header and a panel or body, the expected behavior is when user clicks the header, the body of accordion gets toggled.

Creating accordions is as simple as wrap your content with <Accordion> component and inside the <Accordion> wrap your head section with <AccordionToggle>, and wrap your accordion body (or panel) with <AccordionPanel> component, <Accordion> component also supports a defaultOpen prop which tells the accordion to be opened by default or not, take a look at this example:

import { Accordion, AccordionToggle, AccordionPanel, AccordionToggleButton } from 'accordionify';

function App() {
  return (
    <div className="container">
      <div>
        <Accordion defaultOpen>
          <AccordionToggle>
            Click me to toggle
            <AccordionToggleButton />
          </AccordionToggle>

          <AccordionPanel>Hey there, Accordion Content goes here</AccordionPanel>
        </Accordion>
      </div>
    </div>
  );
}

As you can see in the above example, we also added a helper component called <AccordionToggleButton /> which you can use to show a (+/-) or (arrow up/arrow down) indicator to show the state of accordion, using it is optional.

Only allow one opened accordion

If you want to display multiple accordions and want only one of them to be opened at the same time, you need to wrap your <Accordion>s with <AccordionGroup> and pass a atomic prop to it:

import { AccordionGroup, Accordion, AccordionToggle, AccordionPanel, AccordionToggleButton } from 'accordionify';

function App() {
  return (
    <div className="container">
      <AccordionGroup atomic>
        <Accordion defaultOpen>
          <AccordionToggle>
            Click me to toggle
            <AccordionToggleButton />
          </AccordionToggle>

          <AccordionPanel>Hey there, Accordion Content goes here</AccordionPanel>
        </Accordion>
        <Accordion>
          <AccordionToggle>
            Click me to toggle
            <AccordionToggleButton />
          </AccordionToggle>

          <AccordionPanel>Hey there, Accordion Content goes here</AccordionPanel>
        </Accordion>
        <Accordion>
          <AccordionToggle>
            Click me to toggle
            <AccordionToggleButton />
          </AccordionToggle>

          <AccordionPanel>Hey there, Accordion Content goes here</AccordionPanel>
        </Accordion>
      </AccordionGroup>
    </div>
  );
}

Checkout accordionify github repo, It is a simple and new project with no fancy abilities, feel free to drop a PR to collaborate.

DEV Community: Amin Abdolrezapoor

Create Lightweight React Accordions

Install Accordionify - Lightweight React accordion component

Create Accordion component

Only allow one opened accordion