JSFiddle - React, Tailwind, and code Playground

by Pratik Bhonsle

HTML

<html>
 <head>
    <link href="file://c:/jquery/chapter-1/begin/styles/my_style.css" rel="stylesheet"> 
 </head>
 <body>
  <div id="header" class="no_hover"><h1>Header</h1></div>
  <button type="button" id="btn1">Click to Add</button>
  <button type="button" id="btn2">Click to Remove</button>
  <button type="button" id="btn3">Click to Toggle</button>
  <script src="file://c:/jquery/chapter-1/begin/scripts/jquery.js"    type="text/javascript"></script>
 <script src="file://c:/jquery/chapter-1/begin/scripts/test4.js" type="text/javascript"></script>
 </body>
</html>

CSS

.hover{
 border: solid #f00 3px;
}
.no_hover{
 border: solid #000 3px;
}

JavaScript

$(document).ready(function() {
    $("#btn1").click(function() {
        $("#header").addClass("hover");
        $("#header").removeClass("no_hover");
    });
    $("#btn2").click(function() {
        $("#header").removeClass("hover");
        $("#header").addClass("no_hover");
    });
    $("#btn3").click(function() {
        $("#header").toggleClass("hover no_hover");
    });
});