How to show/hide elements using jQuery

- November 12, 2011

In this tutorial we will show you how to show and hide an element with jQuery . First we include the jQuery library, and in script part we add show hide function. We can set duration as parameter : slow, fast, or exact milliseconds.



<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$(".hiddenDiv").show(1000);

$(".myDiv2").hide("fast");

});

});

</script>

</head>

<body>

<button>Hide</button>

<div class="hiddenDiv" style="display:none;">Hidden div </div>

<div class="myDiv2">jQuery show() and hide() example</div>

</body>

</html>