Main Tutorials

jQuery show() and hide() example

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>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
9 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
j
9 years ago

cool

Alagusundar
10 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/

Diva
10 years ago

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

rahul
11 years ago

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

hfjfg
11 years ago

iuuiuu

 XML here 
hfjfg
11 years ago
 XML here 
Mohsen From Iran
11 years ago

Thanks for Example.

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


</script>
keyuri
12 years ago

nice jquery
i like

thanks for share