MattsBits
MattsBits

MattsBits

Show Or Hide HTML Items Using JavaScript  

by Matt Hawkins, 23/04/2009
Categories : JavaScript

Using this Javascript function you can toggle the visibility of HTML items by their ID.

Include the following in the <head> of your web page :

<script type="text/javascript">
<!--
function toggleID(id) {

  if (document.getElementById(id).style.display=='none') {
    document.getElementById(id).style.display='block';
  } else {
    document.getElementById(id).style.display='none';
  }  
}
// -->
</script>


Then ensure the HTML element you wish to show/hide has an ID attribute defined, eg :

<div id="my_div">This is an example DIV</div>


Calling the JavaScript function and passing it "my_div" will toggle the visibility of the div, eg :

<a href="#" onclick="javascript:toggleID('my_div');return false;">Click here</a>

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