React Accordion

A simple React accordion component.

Example

import React from 'react';
import ReactDOM from 'react-dom';
import ReactAccordion from '@sethorax/react-accordion';

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            accordionData: [
                {
                    id: 1,
                    title: 'Entry 1',
                    content: '<div>Fancy html content</div>'
                },
                {
                    id: 2,
                    title: 'Entry 2',
                    content: '<div>Fancy html content</div>'
                }
            ]
        }
    }

    render() {
        return (
            <div className="my-app-contents">
                <h1>Accordion</h1>
                <ReactAccordion data={this.state.accordionData} multiple={false} collapsible={true} animation="300"/>
            </div>
        );
    }
}

ReactDOM.render(<App/>, document.getElementById('app'));

Props

Property | Type | Default | Required | Description :-------------------|:------:|:--------------:|:--------:|:---------------------------------------- data | array | | yes | Array of accordion contents. multiple | bool | false | no | Allows multiple accordion entries to be open at the same time. collapsible | bool | true | no | If set to false the currently opened accordion entry cannot be closed. animation | number | 500 | no | Animation speed in milliseconds. If set to 0 animations are disabled completely.

Licence

MIT