BinaryMuse/fluxxor

am new to react...i am finding very difficult in writing a simple animation

• I have anchor tag which is my search icon
• when I click the search icon the text box should open and when i click the icon the textbox should close back with slide functionality
• everything they have created inside the sportsHeader class
• and in render function you can see my html
• when the page loads I am make the text box as display none
• when I click the icon the box should open up.
  -providing my code in fiddle too

https://jsfiddle.net/n5Luz6ym/72/

react code

class sportsHeader extends React.Component {
    constructor(props) {
        super(props);
        this.sportsSearchPanel = this.sportsSearchPanel.bind(this);

    }

    sportsSearchPanel() {
        console.log("sportsSearchPanel" +this);        
    }

    render() {

        return (
            <div className={'sportsHeader sportsHeader--' + this.props.layout} role="banner">

                <div className="sportsHeader-NBA">
                    <a onClick={this.sportsSearchPanel} href="javascript:;" className="sportsHeader-NBA-search">
                        <span className="hidden">Search <abbr>NBA</abbr>.com</span>
                    </a>
                    <input className="sportsHeader-NBA-search-input" type="text" />

                </div>

            </div>
        );
    }
}


css

.sportsHeader-NBA-search-input {
    border: 1px solid red;
    display: none;
}