JSFiddle - React, Tailwind, and code Playground

by Alex Fogarty

HTML

<div id="panel"><h1>This is my awesome slide down panel!</h1></div>
<a id="panel-control" href="#">Panel toggle</a>
<p>The remainder of my page will go here as normal!</p>

CSS

body{
    font-family:arial;        
}
#panel{
     background-color:#333;
    color:#fff;    
    height:100px;
    padding:20px;
}
#panel-control{
    text-decoration:none;
    color:#ffff33;
    display:block;
    margin:0;
    padding:10px;
    background-color:#333;
    width:100px;
    margin:0 auto 20px;
    text-align:center;
}

JavaScript

$(document).ready(function() {
                 
$( "#panel-control" ).click(function() {

   $("#panel").slideToggle();


});            
                 
});