JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div id="firstdiv" class="scolors">
         Hello Jquery
</div>
<input type="button" id="jqqueryh" value="slide down"/>
<input type="button" id="jqquerys" value="slide up"/>
<input type="button" id="jqqueryt" value="slide toggle"/>
<input type="button" id="jqqueryts" value="slide toggle"/>

CSS

.scolors{
    width: 500px;
    height: 100px;
    background-color: grey;
    
}

JavaScript

//In Jquery

$("#jqqueryh").on("click",function(){
    $("#firstdiv").slideDown(1000);
});
$("#jqquerys").on("click",function(){
    $("#firstdiv").slideUp("slow");
});
$("#jqqueryt").on("click",function(){
   $("#firstdiv").slideToggle("slow");
});

$("#jqqueryts").on("click",function(){
    $("#firstdiv").slideToggle("slow",function(){alert("finished")}); //with callback
});

//This is not available in Javascript