Expand/Collapse or Hide/Show

This JavaScript will expand or collapse the content. This technique is often used in menu.

Click the + or - button to expand or collapse the text.

 menu to Expand or Collapse the contents
This is a secure centralized application launching hub. It's purpose is to provide a single location for intranet application access. If you do not yet have an account, please register by clicking on the menu item Register located on the left side of this page.

1. Define buttons to trigger the expend or collapse commend.

2. Name a block of code (object) which will be expended or collapsed. In this example, it is:

  <div id=xWinBody2> 
    ...
  </div>

3. At run time, this block can be displayed or hided by changing the display style to "display.none", or "". The JavaScript code is:

//IE only, id is varible
function ExpandCollapse(e)
{
	if (e.style.display == "")
		e.style.display = "none";
	else
		e.style.display = "";
}

Hide is equivalent to html syntax

  <div id=xWinBody2 style="DISPLAY:none" > 
    ...
  </div>

Click to see more samples