jQuery's show() and hide() are among the most commonly used jQuery methods. They let you reveal or conceal any element on the page, optionally with an animation.
show()— displays the matched elements.hide()— hides the matched elements.
Both methods accept an optional speed string ('fast', 'slow') or a duration in milliseconds to animate the transition.
Example
Two buttons control a styled <div>. Clicking show reveals it quickly; clicking hide fades it out slowly.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
div {
padding: 8px;
margin: 10px;
border: 1px solid blue;
width: 450px;
height: 50px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>jQuery show() and hide() example</h1>
<div>This is a jQuery show() and hide() example</div>
<button id="show_box">Show</button>
<button id="hide_box">Hide</button>
<script type="text/javascript">
$("#show_box").click(function() {
$("div").show('fast');
});
$("#hide_box").click(function() {
$("div").hide('slow');
});
</script>
</body>
</html>
Speed Options
'fast'— 200 ms animation.'slow'— 600 ms animation.- A number (e.g.
400) — custom duration in milliseconds. - Omitted — instant show/hide with no animation.
Hope this tutorial is useful for you. Keep following PHP Tutorial for Beginners for more help.