Create Lightweight React Accordions
Tags: react, accordion, javascript, webdev
Published: 2022-01-19 19:50:06

I have created a very simple [Accordion Component](https://github.com/amiut/accordionify) called [accordionify](https://www.npmjs.com/package/accordionify) for react which you can be used for creating collapsible sections. You can [check demo here](https://amiut.github.io/accordionify/) 


![Accordionify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wmb6d6pnv5mvbsqdrr6.png)

## 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](https://github.com/amiut/accordionify) github repo, It is a simple and new project with no fancy abilities, feel free to drop a PR to collaborate.