https://github.com/legitcode/accordion
A simple accordion component based on Thoughbot's accordion in refills
https://github.com/legitcode/accordion
Last synced: 10 months ago
JSON representation
A simple accordion component based on Thoughbot's accordion in refills
- Host: GitHub
- URL: https://github.com/legitcode/accordion
- Owner: Legitcode
- Created: 2015-09-22T04:01:43.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-17T02:22:55.000Z (about 10 years ago)
- Last Synced: 2025-01-29T09:31:01.013Z (12 months ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 1
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#accordion
A simple React accordion component based on Thoughtbots Refills accordion component
##Install
```bash
npm install legit-accordion --save
```
##Example
```js
import { Accordion, AccordionItem } from 'legit-accordion';
// Import the default styling.
require('legit-accordion/lib/default');
export default class Component extends React.component {
render() {
return (
// Optionally specificy an accordion element by name to be active. If
// left out, all accordions will be closed
This is an accordion item. The first.
This is another accordion item. The second.
)
}
}
```
If you'd like to override the HTML that is displayed on the closed accordion
you can use the `labelHTML` prop:
```js
Item 1}>
This is an accordion item with a fancy label
```
That's it! The caveat here is that the open and close animations depend on the
`max-height` property, which is by default set to 500px. If your content is going
to be taller than that, you can override this:
```css
.accordion .is-expanded > div.content {
max-height: 1000px;
}
```