ReactJS Collapsible component
ReactJs collapsible accordion component. Light, simple and functional. Allows expand and collapse html content. Ready for use in your ReactJs application. Works with React 16.x.x versions.
Demo
https://www.devzonetech.com/demo/react-collapsible-component/
Installation
npm install react-collapsible-component --save
Usage
Howto use ReactJs collapsible accordion component.
1. Regular usage
import {
CollapsibleComponent,
CollapsibleHead,
CollapsibleContent
} from "react-collapsible-component";
export default class MyComponent extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
...
<CollapsibleComponent>
<CollapsibleHead className="additionalClassForHead">
Head title 1
</CollapsibleHead>
<CollapsibleContent className="additionalClassForContent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex{" "}
</p>
</CollapsibleContent>
<CollapsibleHead isExpanded={true}>
Head title 2
</CollapsibleHead>
<CollapsibleContent isExpanded={true}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</CollapsibleContent>
<CollapsibleHead>Head title 3</CollapsibleHead>
<CollapsibleContent>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.{" "}
</p>
</CollapsibleContent>
</CollapsibleComponent>
</div>
);
}
}2. Use with collapsed content positioned above some of Head titles
import {
CollapsibleComponent,
CollapsibleHead,
CollapsibleContent
} from "react-collapsible-component";
export default class MyComponent extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
...
<CollapsibleComponent name="second">
<CollapsibleHead>Head title 1</CollapsibleHead>
<CollapsibleContent>
<p>
11111 Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</CollapsibleContent>
<CollapsibleContent isExpanded={true}>
<p>
22222 Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in
</p>
</CollapsibleContent>
<CollapsibleHead
showContentAboveButton={true}
isExpanded={true}
>
Head title 2
</CollapsibleHead>
<CollapsibleContent>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
</p>
</CollapsibleContent>
<CollapsibleHead>Head title 3</CollapsibleHead>
<CollapsibleHead>Head title 4</CollapsibleHead>
<CollapsibleContent>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</p>
</CollapsibleContent>
<CollapsibleHead>Head title 5</CollapsibleHead>
<CollapsibleContent>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
</CollapsibleContent>
</CollapsibleComponent>
</div>
);
}
}Component Props
| Prop | Default | Required | Values | Description |
|---|---|---|---|---|
| className | no | String | Custom defined css class | |
| name | if more than one conponent on one page is used | String | Qunique name identifier | |
| isExpanded | false | no | Boolean: true or false | Show or hide collapsible content. |
| showContentAboveButton | false | no | Boolean: true or false | Show collapsible content above Head title. |
License
This project is licensed under the MIT License - see the LICENSE file for details