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

h3 {
  background-color: red;
}

.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 {
    overflow: hidden;
    transition: max-height .5s;
    box-sizing: border-box;
    max-height: 0;
}


.accordion-section.selected > .body {
    max-height: 100px;
}

.accordion-section > .body > .body-inner {
  background: green;
    padding: 30px;
    font-size: 20px;
    color: #fff;
    line-height: 28px;
    margin-bottom: 15px;
}

.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}


.mobile-accordion-question-title:before {
    background: #086B94;
}

.mobile-accordion-question-title:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    background-color: transparent;
    left: 0;
    top: 0;
}

.mobile-submenu-dropmenuHeader {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

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;
  
        return React.cloneElement(child, {
            key: id,
            selected: id === selectedId,
            onSelect: this.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);

    console.log("children----->" + JSON.stringify(children));

    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.onSelect(this.props.id);
  }

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


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

        return (
            <div className={className}>
                <div className = "mobile-accordion-question-title mobile-submenu-dropmenuHeader">

                  <h3...