Tiny, super simple accordion for React ·

Fully responsive, no resize event listeners, no dependencies, minimal markup, <80 LOC.

Codesandbox demo

Installation

npm install react-tiny-accordion

Usage

import Accordion from 'react-tiny-accordion'

<Accordion className='accordion'>
    <div data-header="Title can be string literals">
        Content 1
    </div>
    <div data-header={<OrComponents />}>
        Content 2
    </div>
</Accordion>

Add some styling

.accordion {
  border-bottom: 1px solid #999;
}

/* Header */
.accordion > div > div:first-of-type {
  border: 1px solid #999;
  border-bottom: 0;
  padding: 1em;
  background-color: #eee;
}

/* Content */
.accordion > div > div:last-of-type {
  border-left: 1px solid #999;
  border-right: 1px solid #999;
}

Protip: Check the Codesandbox demo for a more complete styling example.

Props

| Prop | Description | Default | |--------------------------|-------------------------------------------------------------------------------------|---------| | transitionDuration | Duration of expand/collapse transition. | 500 | | transitionTimingFunction | Speed curve of the transition, can be any valid CSS transition timing function. | 'ease' | | openClassName | The CSS class that should be applied to the currently expanded item. | 'open' | | selectedIndex | Toggling an item can also be done via props. | | | onChange | Event triggered when the user toggle an item, args: index, expanded, selectedIndex. | | | changeOnClick | Set this to false if you only want to expand items via the selectedIndex prop. | true |