In Action

Using JQuery to Hide/Show DIV Tag

If you have created user interfaces using languages like C# and VB you are no doubt familiar with the visible property. With a little JQuery we can accomplish the same effect using html div tags.


This is some text inside our div tag





JQuery Code

JQuery Code for our example

You can see in the code below that we are using the hide function on our div whose id is named "hideshow". The hide() function is not just restricted to div tags. hide() can be used on any html element.

$(document).ready(function(){
  $("#hide").click(function(){
    $("#hideshow").hide();	
  });
  $("#show").click(function(){
    $("#hideshow").show();
  });
});	

HTML Code

HTML Code for our example

<div id="hideshow"><p>This is some text inside our div tag</div>
<button id="hide">Hide</button>
<button id="show">Show</button>