Simple panels

Accordion ReactJS

by Sparrow Squire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="accordionExample"></div>

SCSS

.section {
  position: relative;
  float: left;
  width: 100%;
  border: 1px solid #999;
  border-radius: 3px;
  margin-bottom: 15px
}

.expander-head {
  width: 100%;
  overflow: hidden;
  background: white;
  cursor: pointer;
  font-weight: bold;
  color: #999;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 10px;
  padding-right: 45px;
  box-sizing: border-box
}

  button {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    text-indent: -9999%;
    background: transparent;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    visibility: hidden
  }
    button:before {
      content: '\0002B';
      display: block;
      transition: all .25s ease-in-out;
      text-indent: 0;
      line-height: 40px;
      visibility: visible
    }
 
.section.open button:before {content: '\02212'}

.expander-body {
  height: 0;
  overflow: hidden;
  transition: all .25s ease-in;
}
  
  .section.open .expander-body {height: auto}

.content {
  padding: 10px;
  color: #CCC;
}

JavaScript 1.7

var Section = React.createClass({
  toggleExpander: function() {
    if(this.state.open) {
      this.setState({
        open: false,
        class: "section"
      });
    } else {
      this.setState({
        open: true,
        class: "section open"
      });
    }
  },
  
  getInitialState: function() {
     return {
       open: false,
       class: "section"
     }
  },
  
  render: function() {
    return (
      <div className={ this.state.class }>
        <button>toggle content</button>
        <div className="expander-head" onClick={ this.toggleExpander }>{ this.props.title }</div>
        <div className="expander-body">
          <div className="content">{ this.props.children }</div>
        </div>
      </div>
    );
  }
});

var Accordion = React.createClass({
  render: function() {
    return (
      <div className="main">
      	<h3 className="title">{ this.props.title }</h3>
        <Section title="Section Title One">Text 1</Section>
        <Section title="Section Title Two">Text 2</Section>
        <Section title="Section Title Three">Text 3</Section>
      </div>
    );
  }
});

ReactDOM.render(
	<Accordion title="Example Accordion Title" />,
  document.getElementById('accordionExample')
);