TheDesignspace
Javascript toggle function


June 09, 2007
Javascript | Snippets

One of the most frequently used constructions in javascript are functions that toggle styles or properties on and off. This can be used for items that require a highlighting effect, or to create layers that expand or contract, or any other property change where you want a property of an element to toggle on and off depending on its current state.

Put this in the head of the document:
 <script>function toggle(id){ 
  var element = document.getElementById(id); 
  element.style.display = (element.style.display == 'block') ? "none" : "block"; 
  } 
 </script> 

Create the trigger for the toggle:
<a href="javascript: toggle(myElement);">Open/Close</a>

Create the element you want to toggle open and closed:
<div id="myElement" style="display:block"> content goes here </div>

Posted by ellen at June 09, 2007 10:56 AM | TrackBack

 Comments

I would like to know about the loading of java script as well as VB script.Are they live in the Internet explorer software which is loading in the computer or loading by other disk. thank you

Posted by: ashok kumar on July 24, 2007 8:21 AM

Hi ashok, when they are downloaded along with the HTML code and interpreted by the browser, they are considered to be "client-side" scripts. Both can be also used as server-side scripting languages when used in .asp or .jsm, etc. In that case they are interpreted by the server, before the HTML page is generated and downloaded to the browser.

Take a look at the wikipedia article on JavaScript for more information.

Posted by: Ellen on July 24, 2007 9:01 AM
 Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Recommended Reading