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


<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>
<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>
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: pink;
    border: solid 1px teal;

#panel {
    padding: 10px;
    display: none;
        $(this).css("background-color", "pink");
        $(this).css("background-color", "teal");
        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.