Created
July 3, 2014 09:55
-
-
Save Qt-dev/4ca4c41b8ec8f6c0bb27 to your computer and use it in GitHub Desktop.
An accordion in ReactJS/CSS3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" | |
| } | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @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> | |
| ); | |
| } | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @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> | |
| ); | |
| } | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
Thanks for posting this. I was able to get a test working after changing the 'key' attribute name for each Section's data object (I used 'id' instead). Though, I'm not exactly sure why this made the difference, as I don't believe that 'key' is a reserved word in either JS or React.
Yeah, key is internal now. http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
code doesnt show output as expected