JSFiddle - React, Tailwind, and code Playground

by Talty09

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head></head>
    <div id="panel">
        This is my panel
    </div>
    <p class="slide">
        <a href="#" class="btn-slide">Slide Panel</a>
    </p>
</html>

CSS

.slide
{
 margin: 0;
 padding: 0;
 border-top: solid 4px #422410;
 background: url(http://www.webdesignerwall.com/demo/jquery/images/btn-slide.gif) no-repeat center top; 
}

p
{
 display: block;
 -webkit-margin-before: 1em;
 -webkit-margin-after: 1em;
 -webkit-margin-start: 0px;
 -webkit-margin-end: 0px; 
}

body 
{
 margin: 0 auto;
 padding: 0;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
.btn-slide
{
 background: url(http://www.webdesignerwall.com/demo/jquery/images/white-arrow.gif) no-repeat right -50px;
 text-align: center;
 width: 144px;
 height: 31px;
 padding: 10px 10px 0 0;
 margin: 0 auto;
 display: block;
 font: bold 120%/100% Arial, Helvetica, sans-serif;
 color: white;
 text-decoration: none; 
}
.active
{
 background-position: right 12px;   
}
#panel
{
 background: #754c24;
 height: 200px;
 display: none; 
}
a:focus
{
 outline: none;   
}

JavaScript

$(document).ready(function(){

    $(".btn-slide").click(function(){
      $("#panel").slideToggle("slow");
      $(this).toggleClass("active");
    });
    
});