JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel">

 content will be shown here.

    </div> <!--  end  Panel content-->

    <div id="openCloseWrap">
     <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
    </div>
</div>

CSS

/** left sliding panel **/

#panel {
 background: #754c24; 
    height: 500px;
    display: none;
}
.slide {
    margin: 0;
    padding: 0;
/*  border-top: solid 4px #422410;  */
    background: url(http://www.theprintblog.com/wp-content/uploads/2013/03/green.jpg) no-repeat center top;
}
.btn-slide {
    background: url(http://www.theprintblog.com/wp-content/uploads/2013/03/green.jpg) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
/*  display: block;  color: #fff;*/
    font: bold 120%/100% Arial, Helvetica, sans-serif;

    text-decoration: none;
}

JavaScript

$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel").animate({width: 'toggle'});
        $(this).toggleClass("active"); return false;
    });


});