cybersiddhu/backendData.js

## backendData.js
var backendData = [
  {
    "title":"Section 1",
    "content":"Our content for the section 1"
  },
  {
    "title":"Section 2",
    "content":"Our content for the section 2"
  },
  {
    "title":"Section 3",
    "content":"Our content for the section 3"
  }
]

## container.jsx
/**
* @jsx React.DOM
*/
Container = React.createClass({
  getInitialState: function(sectionList){
    return { openSectionIndex: -1 }
  },
  buildSections: function(sectionList){
    var sections = sectionList.map(this.buildSection)
    return sections;
  },
  buildSection: function(section, index){
      var openStatus = (index === this.state.openSectionIndex);
      /* Remember to add a 'key'. React wants you to add an identifier when you instantiate a component multiple times */
      return <Section key={index} data={section} toggleOne={this.toggleOne} open={openStatus} />
  },
  toggleOne: function(id){
    if(this.state.openSectionIndex === id){
      this.setState({openSectionIndex: -1});
    } else {
      this.setState({openSectionIndex: id});
    }
  },
  render: function() {
    var sections = this.buildSections(this.props.data);
    return (
      <div className="container">
        {sections}
      </div>
    );
  }
})

## index.html
<html>
<head>
  <title>Test page</title>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/JSXTransformer.js"></script>
  <script type="text/jsx" src="section.jsx"></script>
  <script type="text/jsx" src="container.jsx"></script>
  <link type="text/css" rel="stylesheet" href="style.css"></link>
</head>

  <body>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <Container data={backendData} />,
        document.getElementsByTagName('body')[0]
      );
    </script>
  </body>
</html>

## section.jsx
/**
* @jsx React.DOM
*/
Section = React.createClass({
  toggleContent: function(){
    this.props.toggleOne(this.props.key)
  },
  getHeight: function(){
    if(this.props.open){
      return "3em"
    } else {
      return "0"
    }
  },
  render: function() {
    var style = { height: this.getHeight() }
    return (
      <div className={"section section" + this.props.key}>
        <h2 className="sectionTitle" onClick={this.toggleContent} >{this.props.data.title}</h2>
        <p className="sectionContent" style={style} >{this.props.data.content}</p>
      </div>
    );
  }
})

## style.css
.sectionTitle {
  display: block;
  cursor: pointer;
}

.sectionContent {
  overflow: hidden;
  -webkit-transition: height 0.3s ease-in;
  -moz-transition: height 0.3s ease-in;
  -o-transition: height 0.3s ease-in;
  -ms-transition: height 0.3s ease-in;
  transition: height 0.3s ease-in;
}
	var backendData = [
	{
	"title":"Section 1",
	"content":"Our content for the section 1"
	},
	{
	"title":"Section 2",
	"content":"Our content for the section 2"
	},
	{
	"title":"Section 3",
	"content":"Our content for the section 3"
	}
	]
	/**
	* @jsx React.DOM
	*/
	Container = React.createClass({
	getInitialState: function(sectionList){
	return { openSectionIndex: -1 }
	},
	buildSections: function(sectionList){
	var sections = sectionList.map(this.buildSection)
	return sections;
	},
	buildSection: function(section, index){
	var openStatus = (index === this.state.openSectionIndex);
	/* Remember to add a 'key'. React wants you to add an identifier when you instantiate a component multiple times */
	return <Section key={index} data={section} toggleOne={this.toggleOne} open={openStatus} />
	},
	toggleOne: function(id){
	if(this.state.openSectionIndex === id){
	this.setState({openSectionIndex: -1});
	} else {
	this.setState({openSectionIndex: id});
	}
	},
	render: function() {
	var sections = this.buildSections(this.props.data);
	return (
	<div className="container">
	{sections}
	</div>
	);
	}
	})
	<html>
	<head>
	<title>Test page</title>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/JSXTransformer.js"></script>
	<script type="text/jsx" src="section.jsx"></script>
	<script type="text/jsx" src="container.jsx"></script>
	<link type="text/css" rel="stylesheet" href="style.css"></link>
	</head>

	<body>
	<script type="text/jsx">
	/** @jsx React.DOM */
	React.renderComponent(
	<Container data={backendData} />,
	document.getElementsByTagName('body')[0]
	);
	</script>
	</body>
	</html>
	/**
	* @jsx React.DOM
	*/
	Section = React.createClass({
	toggleContent: function(){
	this.props.toggleOne(this.props.key)
	},
	getHeight: function(){
	if(this.props.open){
	return "3em"
	} else {
	return "0"
	}
	},
	render: function() {
	var style = { height: this.getHeight() }
	return (
	<div className={"section section" + this.props.key}>
	<h2 className="sectionTitle" onClick={this.toggleContent} >{this.props.data.title}</h2>
	<p className="sectionContent" style={style} >{this.props.data.content}</p>
	</div>
	);
	}
	})
	.sectionTitle {
	display: block;
	cursor: pointer;
	}

	.sectionContent {
	overflow: hidden;
	-webkit-transition: height 0.3s ease-in;
	-moz-transition: height 0.3s ease-in;
	-o-transition: height 0.3s ease-in;
	-ms-transition: height 0.3s ease-in;
	transition: height 0.3s ease-in;
	}