Simple Accordion example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react-with-addons.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="example"></div>

CSS

.accordion {
	border: solid 1px #000;
	border-bottom-width: 0;
}
.accordion-section {
	border-bottom: solid 1px #000;
}

.accordion-section > h3 {
	padding: 6px;
	font-size: 16px;
	background-color: #CCC;
    margin: 0;
}
.accordion-section > .body {
    height: 0;
    padding: 0 10px;
    overflow-y: hidden;
    transition: height .5s;
    transition: height .5s, padding-top .5s, padding-bottom .5s;
}
.accordion-section.selected > .body {
    height: 100px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.down-arrow {
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.up-arrow {
    border-top: .15em solid #0b6997;
    border-right: .15em solid #0b6997;
    border-bottom: 0;
    border-left: 0;
    width: .5em;
    height: .5em;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    transition: all .3s ease;
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.selected .up-arrow {
    transform: rotate(-45deg);
}
.accordion-section .up-arrow {border-color:red} 

.accordion-section.selected .up-arrow {border-color:pink}

JavaScript 1.7

class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selected: props.selected };
    this.enhanceSection = this.enhanceSection.bind(this);
    this.onSelect = this.onSelect.bind(this);
  }

  enhanceSection(child) {

    //var child;
    //var props;

    console.log("enhanceSection");
    
    // debugger;


    var selectedId = this.state.selected,
           id = child.props.id,
           onSelect = this.onSelect;
  
        return React.cloneElement(child, {
            key: id,
            _selected: id === selectedId,
            _onSelect: onSelect
        });

  }

  onSelect(id) {
        console.log("onSelect");


        if (this.state.selected === id) {
          console.log("onSelect if");
          console.log("his.state.selected---->" + this.state.selected);
          this.setState({selected: ""});
        } else {

            console.log("onSelect else");

            this.setState({selected: id});
        } 

  }

  render() {
        console.log("render");
        // debugger;


    var children = React.Children.map(
            this.props.children, this.enhanceSection);

    return (
      <div className="accordion">
        <p> testing </p>
          {children}
      </div>
    );
  }

}


class SectionAccordion extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this)
  }
  onSelect() {
        console.log("onSelect");
       // debugger;


    this.props.$Accordion_onSelect(this.props.id);
  }

  render() {
        console.log("render");


        console.log("accordion / the Accordion Section component");
        var className = 'accordion-section' + (this.props.$Accordion_selected ? ' selected' : '');

        return (
            <div className={className}>
                <h3 onClick={this.onSelect}>
                    {this.props.title}
                </h3>

                                <div className="up-arrow"></div>



      ...