<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");
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.