ReactJs simple accordion script

Simple Accordion using ReactJs
Simple Accordion using ReactJs

Accordion(collapsible content) is used to show and hide the content which is broken into section.

Learn how to create an accordion using Reactjs.

Step 1:

<div id="root"></div>

Step 2:

*{margin:0;padding:0}
.center-wrapper{width:500px;margin: 25px auto;border:1px solid #ccc;}
.section{width:100%;cursor:pointer}
.section p.title{display:block;font-size:15px;background:#64c7ef;padding:5px 0;border-bottom:1px solid #ccc;}

.content{overflow-y:hidden;min-height:0;max-height: 0;transition:all .25s ease-in-out;font-size:12px;    background: rgba(22, 160, 193, 0.23);}
.content.open{min-height:75px;box-sizing:border-box;}

Step 3:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

Step 4:

ReactDOM.render(
    <RootContainer />,
    document.getElementById('root')
);

Step 5:

var RootContainer = React.createClass({
    render:function(){
      return (
        <div className="center-wrapper">
            <Accordion title="Accordion1" defaultState="open">
                <div className="container">
                    <p>Accordion1 Content goes here...</p>
                </div>
            </Accordion>
            <Accordion title="Accordion2" defaultState="">
              <div className="container">
                  <p>Accordion2 Content goes here...</p>
              </div>
            </Accordion>
            <Accordion title="Accordion3" defaultState="">
              <div className="container">
                  <p>Accordion3 Content goes here...</p>
              </div>
            </Accordion>
        </div>
      )
    }
});

Step 6:

var Accordion = React.createClass({
    getInitialState: function(){
        if(this.props.defaultState=="open")
            return {"accordionActiveClass":"open","accordionActiveStatus":true}
        else
            return {accordionActiveClass:"",accordionActiveStatus:false}
    },
    activeAccordionEvent:function(){
        if(this.state.accordionActiveStatus) {
            this.setState({accordionActiveClass:"",accordionActiveStatus:false});
        } else {
            this.setState({accordionActiveClass:"open",accordionActiveStatus:true});
        }
    },
    render:function(){
        return (
                <div>
                    <div className={"section " + this.state.accordionActiveClass} onClick={this.activeAccordionEvent}>
                        <p className="title">{this.props.title}</p>
                    </div>
                    <div className={"content " + this.state.accordionActiveClass}>
                        {this.props.children}
                    </div>
                </div>
            );
    }
});

Leave a Reply

Your email address will not be published. Required fields are marked *