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
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
<html>
<head runat="server">
<title>Untitled Page</title>
<!-- The below line is the code 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() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('#slickbox').hide();
// shows the slickbox on clicking the noted link
$('a#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});
// hides the slickbox on clicking the noted link
$('a#slick-hide').click(function() {
$('#slickbox').hide('fast');
return false;
});
});
</script>
</head>
<body>
<div>
<div style="background:#CCC"> <a href="#" id="slick-show">Show</a></div>
<div id="slickbox">
<Label ID="Label1" runat="server" Text="Label">Here is the div that you just made visible</asp:Label>
<div style="background:#CCC"> <a href="#" id="slick-hide">Hide</a></div>
</div>
</div>
</body>
</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>
Discussion
No comments for “Jquery – Chapter 2 .Show/Hide Div tag”