Jquery Show and Hide



This simple tutorial teaches you to show and hide elements using jquery:

1) Lets start with $(document).ready() function. I hope you remember to have loaded jquery.js in your header file. 

$(document).ready(function() {

2) Identify the css selector (id or class) and use the jquery hide() or jquery show() event function to hide or show that css class/id.

$(document).ready(function() {
  $('a#mainclass').hide();
  $('a#mainclass').hide();
});

3) Attach the above selector with the jquery click event() as follows:

// basic show and hide
$(document).ready(function() {
$('#hideid').click( function() {
 $('.mainclass').hide();
 });
$('#showid').click( function() {
 $('.mainclass').show();
 });
});

3) You can use jquery hide(), jquery show() or jquery toggle() event.

4) Complete code is as follows:

<script type="javascript/text">
// basic show and hide
$(document).ready(function() {
$('#hideid').click( function() {
 $('.mainclass').hide();
 });
$('#showid').click( function() {
 $('.mainclass').show();
 });
});
</script>

<input type="submit" id="hideid" value="Hide" name="hideid">
 
<input type="submit" id="showid" value="Show" name="showid"> 
<div class="mainclass">
This is a dummy text for testing jquery.
</div>