Show And Hide DIVs Using JQuery
by Matt Hawkins, 10/01/2011
Categories : JavaScript
The jQuery library can be used to easily show or hide DIVs within your HTML pages. The following example shows how it can be done.
Include the jQuery libary in the head section of your HTML page :
<script src=\"http://www.yoursite.com/jquery-1.4.4.js\"></script>
You can download the jquery library from the jQuery website or use Google's version :
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
Now include the following Javascript functions in your HTML page <head> section :
<script type="text/javascript">
<!--
function togglebox(box_id) {
$("#" + box_id).fadeToggle("slow");
};
function showbox(box_id) {
$("#" + box_id).fadeIn("slow");
};
function hidebox(box_id) {
$("#" + box_id).fadeOut("slow");
};
// -->
</script>
You can then use the following Javascript function calls to show, hide or toggle the appropriate DIVs :
hidebox('mydiv1');
showbox('mydiv1');
togglebox('mydiv1');
Where 'mydiv1' is the ID of the DIV you wish to fade.
Click here for an example page.
Related Links:
Author : Matt Hawkins Last Edit By : Matt Hawkins
MattHawkins CMS v3.0 - Copyright 2009-2022