jQuery show() and hide() example

by

jQuery show() and hide() are the most common used effect.

  1. show() – Display the matched elements.
  2. hide() – Hide the matched elements.

Both methods are support duration as parameter : slow, fast, or exact milliseconds. If this parameter is omitted, the default 400 milliseconds is apply.

Try it yourself


<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	p{
		padding:8px;
		margin:16px;
		border:1px solid blue;
		width:250px;
		height:50px;
		background-color:#999999;
		color:white;
	}
</style>

</head>

<body>

<h1>jQuery show() and hide() example</h1>

<p>Hello, this show() and hide() example</p>

<button id=show>show()</button>
<button id=hide>hide()</button>
<button id=reset>Reset</button>

<script type="text/javascript">

$("#show").click(function () {
   $("p").show('fast');
});

$("#hide").click(function () {
   $("p").hide(1000);
});

$("#reset").click(function(){
	location.reload();
});
</script>

</body>
</html>
Try Demo

mkyong

Founder of Mkyong.com, passionate Java and open-source technologies. If you enjoy my tutorials, consider making a donation to these charities.

9 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
j
11 years ago

cool

1
Reply
Alagusundar
12 years ago

Thanks Sir. In this example is very useful for my Project. I am a big fan of you. Thanks for Posting.
http://www.dreamdestinations.in/

0
Reply
Diva
12 years ago

you can find some more details in the below link,”http://javadomain.in/jquery-showhide-example-in-jsf/”

0
Reply
rahul
13 years ago

hello
Is it possible hide and show same text automatically after regular interval of time.

0
Reply
hfjfg
13 years ago

iuuiuu

 XML here
0
Reply
hfjfg
13 years ago 
 XML here
0
Reply
Mohsen From Iran
13 years ago

Thanks for Example.

0
Reply
dasd
13 years ago 
<script type="text/javascript">
    $(document).ready(function(){
    $("#hide").click(function () {
        $("p").hide(1000);
    });)};


</script>
0
Reply
keyuri
15 years ago

nice jquery
i like

thanks for share

0
Reply