JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div id="firstdiv" style="font-size: 30px">
         Hello Jquery
</div>
<div id="secondiv" style="font-size: 30px;display: block ">
         Hello Javascript
</div>
<input type="button" id="jqqueryh" value="hide jquery"/>
<input type="button" id="jqquerys" value="show jquery"/>
<input type="button" id="jqqueryt" value="toggle jquery"/><br/>
<input type="button" id="jscripth" value="hide javascript"/>
<input type="button" id="jscripts" value="show javascript"/>
<input type="button" id="jscriptt" value="toggle javascript"/>

CSS

.sample{
    color: red;
    font-size: 30px;    
}

JavaScript

//In Jquery

$("#jqqueryh").on("click",function(){
    $("#firstdiv").hide(); //To hide a element
});
$("#jqquerys").on("click",function(){
    $("#firstdiv").show(); //To show a element
});
$("#jqqueryt").on("click",function(){
    $("#firstdiv").toggle(); //To Toggle a element hide or show
});

//In Javascript

document.getElementById("jscripth").onclick = function(){
    document.getElementById("secondiv").style.display = "none"; //Hide a element in javascript
}
document.getElementById("jscripts").onclick = function(){
    document.getElementById("secondiv").style.display = "block"; //Show a element in Javascript
}
document.getElementById("jscriptt").onclick = function(){ //There is no toggle function you can only check for toggle.
    if (document.getElementById("secondiv").style.display == "block")
        document.getElementById("secondiv").style.display = "none";
    else
        document.getElementById("secondiv").style.display = "block";
}

//Compare the Javascript and Jquery code and you can have a better idea which one is easy to use.