# Accordian
> ./src/js/components/accordion/accordion.jsx

## Purpose
Displays an accordion styled dropdown.

## Props
__id__
* Required - _false_
* Data Type - _STRING_
* Functionality - _A string to act as the components id for your own reference as well as for the functionality reference for the component to function._

__panels__
* Required - _false_
* Data Type - _ARRAY_
* Functionality - _An array of objects that hold the content of each of the accordion component's panel items._
* Expected Data -
  ```json
  [
    {
      id: 'id-of-the-panel-contents',
      theme: 'box-info',  // color class
      open: false, // Is this panel open at mount?
      hasBorder: true,  //  Does the header have one?
      header: 'String or JSX to display in panel\'s header',
      body: 'String or JSX to display in panel\'s body'
    }  
  ]
  ```
* Default - _[]_

## Example
```javascript/jsx
import Accordion from './src/js/components/accordian/accordian.jsx';

<Accordion
  id="test-accordion"
  panels={[
    {
      id: 'test1',
      theme: 'box-success',
      hasBorder: true,
      open: true,
      header: 'Accordion item 1',
      body: 'Cat ipsum dolor sit amet, behind the couch. Who\'s the baby have secret plans i cry and cry and cry unless you pet me, and then maybe i cry just for fun mark territory. Cough furball kitty scratches couch bad kitty or ears back wide eyed for purrrrrr i could pee on this if i had the energy i could pee on this if i had the energy kitty power.'
    },
    {
      id: 'test2',
      theme: 'box-info',
      hasBorder: true,
      header: 'Accordion item 2',
      body: 'Shorter text!'
    },
    {
      id: 'test3',
      theme: 'box-primary',
      hasBorder: true,
      header: (
        <span>
          <i className="fa fa-circle-o" />
          &nbsp;
          Accordion with markup header!
        </span>
      ),
      body: (
        <div>
          <h5>More markup in the body</h5>
          <p>That is <strong>SO</strong> cool!</p>
        </div>
      )
    }
  ]}
/>
```