JSFiddle - React, Tailwind, and code Playground

by tonystark

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>

    <div id="wrapper">
        <div id="container">
            
        </div><!-- end of #container div -->
    
        <a id="showdiv">Show the div</a>|<a id="hideDiv">Hide the div</a>|<a id="toggle">Toggle</a>
    
    </div><!-- end of #wrapper div -->

</body>
</html>

CSS

#container {
 width: 300px;
  height: 300px;
   background: red; 
    margin-bottom: 20px;
}

#wrapper {
 margin: 40px auto;
 width: 400px;
}

JavaScript

$(function() {// When document is ready, run this...

    //Get hold of the link with the id #showdiv and do something when you click it
    $("#showdiv").click(function() {
        // Grab the div with the id #container and show it
        // Alert me when you're done
        $("#container").show(2000, function() {
            alert("I'm done showing");
        });
    });
    
    //Get hold of the link with the id #hideDiv and do something when you click it
    $("#hideDiv").click(function() {
        // Grab the div with the id #container and hide it
        // Alert me when you're done
        $("#container").hide(2000, function() {
            alert("I'm done hiding");
        });
    
    });
    
    // Toggle - This is like a On/Off Switch
    //Get hold of the link with the id #toggle and do something when you click it
    $("#toggle").click(function() {
        // Grab the div with the id #container and show if hidden / hide if shown
        $("#container").toggle(2000);
    });

});