Legitcode/accordion

Name: accordion

Owner: Legitcode

Description: A simple accordion component based on Thoughbot's accordion in refills

Created: 2015-09-22 04:01:43.0

Updated: 2015-09-22 17:37:55.0

Pushed: 2015-11-17 02:22:55.0

Homepage: null

Size: 10

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

accordion

A simple React accordion component based on Thoughtbots Refills accordion component

Install

install legit-accordion --save

Example

rt { Accordion, AccordionItem } from 'legit-accordion';

mport the default styling.
ire('legit-accordion/lib/default');

rt default class Component extends React.component {
nder() {
return (
  // Optionally specificy an accordion element by name to be active. If
  // left out, all accordions will be closed
  <Accordion active='Item 1'>
    <AccordionItem name='Item 1'>
      <p>This is an accordion item. The first.</p>
    </AccordionItem>

    <AccordionItem name='Item 2'>
      <p>This is another accordion item. The second.</p>
    </AccordionItem> 
  </Accordion>
)

If you'd like to override the HTML that is displayed on the closed accordion you can use the labelHTML prop:

ordionItem name='Item 1' labelHTML={<span>Item 1</span>}>
>This is an accordion item with a fancy label</p>
cordionItem>

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:

ordion .is-expanded > div.content {
x-height: 1000px;