Sat Dec 29, 2012 10:42 pm
<html>
<head>
<title>Hide, show and toggle</title>
<script src="jquery-1.8.3.js"></script>
<script>
// Waits until the all document is loaded.
$(document).ready(function(){
// hide elements with different speed.
$("#hide").click(function(){
$("#mark1").hide(1000);
$("#mark2").hide(1000);
$("#mark3").hide(1000);
$("#mark4").hide(1000);
});
// show elements with different speed.
$("#show").click(function(){
$("#mark1").show(1000);
$("#mark2").show(1000);
$("#mark3").show(2000);
$("#mark4").show(3000);
});
// apply toggle action with different speed.
$("#toggle").click(function(){
$("#toggle1").toggle(1000);
$("#toggle2").toggle(1000);
});
});
</script>
</head>
<body>
<p id="mark1">This paragraph includes part-one.</p>
<p id="mark2">This paragraph includes part-two.</p>
<input id="mark3" type="text"/>
<p id="mark4">This paragraph includes part-three.</p>
<p id="toggle1">This paragraph includes part-four.</p>
<p id="toggle2" hidden="true" >This paragraph includes part-five.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="toggle">Toggle</button>
</body>
</html>
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com
Powered by phpBB © phpBB Group.