React Accordeon component with expand/collapse CSS animation

import Header from './Header.js';
import Footer from './Footer.js';
<Accordeon header={<Header />} footer={<Footer />}>

<Panel key="panel1" expanded>

<Panel key="panel1" expanded={false}>

<Panel key="panel1">

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>    
    );
}

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;

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>    
    );
}

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;