Jquery Hide and Show Div

jQuery is a JavaScript library that simplifies the JavaScript programming. In this example, we will use jQuery Effects to Hide and Show the Div tag.

Jquery Hide and Show Div

Using jQuery effects one can perform lots of task such as Hide, Show, Toggle, Slide, Fade, and Animate the Text. In the article we have discussed Show and Hide methods in Java.

.show() in jQuery is used to display the matched elements. But it does not required arguments. Using the .show effect in jQuery we can easily display an element:

In the similar way jQuery .hide() method can be used to hide HTML elements and Div.

Given is the example that illustrates how to can hide and show HTML elements with the hide() and show() methods:

Example: Show/Hide Div in jQuery

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("#mycontentdiv").hide();
  });
  $("#show").click(function(){
    $("#mycontentdiv").show();
  });
});
</script>
</head>
<body>
<div id="mycontentdiv">Click Hide button, to disappear.</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

This way the DIV elements in HTML can be shown or hide on button click method in jQuery. The jQuery show hide Div methods works just like the CSS display and block.

Check Example