Online Snippets Library

Show and Hide Div in jQuery

To show and hide div, we use hide() and show() function of jQuery.

Syntax

$(selector).hide(speed,callback); $(selector).show(speed,callback);

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<title>Show and Hide Div in jQuery </title>
</head>
<body>
<button id="show">Show me</button>  <button id="hide">Hide me</button>
<div id="content">
Show and Hide div
</div>
</body>
</html>
Javascript
$(document).ready(function(){
  $("#show").click(function(){
    $("#content").show(1000);
  });
   $("#hide").click(function(){
    $("#content").hide(1000);
  });
});