MattsBits
MattsBits

MattsBits

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.

Author : Matt Hawkins  Last Edit By : Matt Hawkins
PHP Powered  MySQL Powered  Valid XHTML 1.0  Valid CSS  Firefox - Take Back The Web  EUKHost - Recommended Webhosting Solutions

MattHawkins CMS v3.0 - Copyright 2009-2017