:cookie: 287 | @bazill03 |http://www.freecodecamp.com/bazill03
@all - i am new to js. I have written accordion code
onSelect(id) {
http://jsfiddle.net/b4L6kyg4/89/
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 onClick={this.onSelect}>
{this.props.title}
</h3>
<div className="up-arrow"></div>
</div>
<div onClick={this.onSelect} className="body">
{this.props.children}
</div>
</div>
);
}
}
React.render((
<div className="form-section">
<div className="accordionTesting">
<h2 className="mobile-h2 mobile-accordionTitle">kick 1</h2>
<Accordion selected="">
<SectionAccordion title="Section 1" id="1">
Section 1 content
</SectionAccordion>
<SectionAccordion title="Section 2" id="2">
Section 2 content
</SectionAccordion>
<SectionAccordion title="Section 3" id="3">
Section 3 content
</SectionAccordion>
</Accordion>
</div>
<div className="accordionTesting">
<h2 className="mobile-h2 mobile-accordionTitle">kick 2</h2>
<Accordion selected="">
<SectionAccordion title="Section 3" id="4">
Section 3
img-responsive
class to your image and it will scale down smaller for mobile devices.
center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
a.black-text,
a:hover.black-text {
color: black;
}