<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="clktst">This is a paragraph that can become invisble when you click the button below.</p>

<button>Click me</button>

<p id="dblclk">If you double-click on me, I will disappear.</p>
  
I change colour on focus: <input type="text"><br/>
  
<button id="reset">Reset</button>
<br/><br/>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div><br/><br/><br/><br/>
<div id="stylize" style="background:pink;height:50px;width:200px;position:absolute;">HELLO</div><br/><br/><br/><br/>
 <button id="btnanimate">Animate!</button>
</body>
</html>

#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: pink;
    border: solid 1px teal;
}

#panel {
    padding: 10px;
    display: none;
}
$(document).ready(function(){
    $("button").click(function(){
        $("#clktst").hide();
    });
    $("#dblclk").dblclick(function(){
        $(this).hide();
    });
    $("input").focus(function(){
        $(this).css("background-color", "pink");
    });
    $("input").blur(function(){
        $(this).css("background-color", "teal");
    });
    $("#reset").click(function(){
        $("#clktst").show();
        $("#dblclk").show();
    });
    $("#flip").click(function(){
      $("#panel").slideToggle("slow");
    });
    $("#btnanimate").click(function(){
        var div = $("#stylize");  
        div.animate({left: '100px'}, "slow");
        div.animate({fontSize: '3em'}, "slow");
    });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.