React accordion component with expand/collapse CSS animation. The event trigger can be configured to any component, such in the Navigation and Content.
MIT License
React Accordeon component with expand/collapse CSS animation. The event trigger can be configured to any component, such in the Navigation and Content
<Accordeon>
Primary component of React Accordeon. It keeps and handles the state of all the elements.
header
(optional)A valid React component that will be rendered in a <header>
html tag. This component will be provided with the two property functions expandAll and collapseAll.
footer
(optional)A valid React component that will be rendered in a <footer>
html tag. This component will be provided with the two property functions expandAll and collapseAll.
import Header from './Header.js';
import Footer from './Footer.js';
<Accordeon header={<Header />} footer={<Footer />}>
<Panel>
The Panel component is the container for each element in the accordeon. This will create the collapse/expand animation for the Content component.
expanded
(optional)Boolean value to configure an initial state for the Panel. If true, the Panel is expanded. If false, the Panel is collapsed.
#####Item expanded
<Panel key="panel1" expanded>
#####Item collapsed
<Panel key="panel1" expanded={false}>
or the expanded property can also be omitted
<Panel key="panel1">
<Nav>
This component accepts any string or any valid React component to render the Panel Header.
This does not require any property at this moment.
<Content>
Any string, html tag, or a valid React component
This does not require any property at this moment.
Accordeon with plain strings in the Nav and Content
import React, { PropTypes } from 'react';
import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
function ExampleOne(props) {
return (
<Accordeon>
<Panel key="panel1">
<Nav>Question 1</Nav>
<Content>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Content>
</Panel>
<Panel key="panel2">
<Nav>Question 2</Nav>
<Content>
And more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</Content>
</Panel>
</Accordeon>
);
}
Given valid React Components
import React, { PropTypes } from 'react';
import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
import AnotherReactComponentNav from './Another-react-component-nav.js';
import AnotherReactComponentContent from './Another-react-component-content.js';
function ExampleOne(props) {
return (
<Accordeon>
<Panel key="panel1">
<Nav><AnotherReactComponent /></Nav>
<Content>
<AnotherReactComponentContent />
</Content>
</Panel>
</Accordeon>
);
}
// A valid React stateless Component (AnotherReactComponentNav.js)
// We can configure the 'toggle' trigger in any React supported event (onClick={toggle})
import React, { PropTypes } from 'react';
const AnotherReactComponentNav = (props) => {
const { expanded, toggle } = props;
return (
<h2>
{expanded ? '-' : '+'}
<button
onClick={toggle}
aria-expanded={expanded}
role="tab"
>
Question 1
</button>
</h2>
);
};
AnotherReactComponentNav.propTypes = {
toggle: PropTypes.func,
expanded: PropTypes.bool,
};
export default Nav;
// A valid React stateless Component (AnotherReactComponentContent.js)
import React, { PropTypes } from 'react';
const Content = (props) => {
const { expanded, toggle } = props;
return (
<div>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</div>
);
};
Content.propTypes = {
toggle: PropTypes.func,
expanded: PropTypes.bool,
};
export default Content;
With some valid HTML
import React from 'react';
import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
function ExampleOne(props) {
return (
<Accordeon>
<Panel key="panel1">
<Nav>Item 1</Nav>
<Content>
<img src="https://placekitten.com/g/500/500" alt="kitten" />
</Content>
</Panel>
</Accordeon>
);
}
Accordeon with Header and Footer
import React from 'react';
import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
import Header from './Header';
import Footer from './Footer';
import NavComponent from './NavComponent';
import ContentComponent from './ContentComponent';
<Accordeon header={<Header />} footer={<Footer />}>
<Panel key="panel1">
<Nav>Question 1</Nav>
<Content>
<div>
<img src="https://placekitten.com/g/500/500" alt="kittlen" />
</div>
</Content>
</Panel>
<Panel key="panel2" expanded>
<Nav><NavComponent /></Nav>
<Content><ContentComponent /></Content>
</Panel>
</Accordeon>
// The Header must be a valid React component (Header.js).
// Two functions are passed as properties: expandAll, collapseAll
import React from 'react';
const Header = (props) => {
const { expandAll, collapseAll } = props;
return (
<div>
<button onClick={expandAll}>Expand All</button> / <button onClick={collapseAll}>Collapse All</button>
</div>
);
};
Header.propTypes = {
expandAll: React.PropTypes.func,
collapseAll: React.PropTypes.func,
};
export default Header;
// The Footer must be a valid React component (Footer.js).
// Two functions are also passed as properties: expandAll, collapseAll
import React from 'react';
const Footer = (props) => {
const { expandAll, collapseAll } = props;
return (
<div>
<span onClick={expandAll}>Expand All</span> / <span onClick={collapseAll}>Collapse All</span>
</div>
);
};
Footer.propTypes = {
expandAll: React.PropTypes.func,
collapseAll: React.PropTypes.func,
};
export default Footer;
Nested Accordeons Demo
- Header and Footer error handling
- Expand/Collapse one Panel at a time