Here i will explaining how you can show and hide the contents inside a div tag on a mouse click using jquery

See the live demo here

    



 



 Show

        Here is the div that you just made visible
 Hide

Here the code for Sample.html ..Copy the code and save it as Sample.html in the folder where you put the java script library jscript.js
Sample.html

Code Explanations

Have you noticed the head section of the html document.The code for using the functions included in the javascript library(jquery.js) is written there

The below line of   code is to reference the jquery library that you downloaded

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

The code for accessing the fuctions written in jquery.js 

<script type="text/javascript"> $(document).ready(function() { 

// The below line of code hides the div tag initially at page load
//slickbox is the id of the div tag

$('#slickbox').hide();

//The below line of code  shows the div  with id slickbox on clicking the link with id slick-show

$('a#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});

//Note down the parameter inside .show(‘slow’) .It displays the div tag slowly.To make the movement fast you can use  .show(‘fast’)

//The below line of code  hides the Div with id slickbox on clicking the link with id slick-hide

$('a#slick-hide').click(function() {
$('#slickbox').hide('fast');
return false;
});

//Note down the parameter inside .show(‘slow’) .It hides the div tag slowly.To make the movement fast you can use  .show(‘fast’)

}); </script>

Related posts:

1. JQuery – Chapter 3 . Loading Update spinner for image loading In this chapter i will explain you how you can bring a spinner or any other image when it takes time to load a...
2. Jquery Introdution – Chapter 1 JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery...
3. Autocomplete TextBox with JQuery In this tutorial i will explain how you can build an Ajax based autocomplete application for text boxes in your website using JQuery and...