Hiding and Showing Contents with DHTML

This demonstrates how to hide and show data. This works by defining a relationship between two elements: the element that you click on to hide and show the contents, and the element to hide or display.

The source element the user clicks on should have its class attribute set to "parent". This associates a style with the element so the proper cursor and user defined style is displayed. In addition, a user-defined attribute is added to the element named child. This attribute points to the ID of the element to hide or show.

The element being hidden or shown needs to have its class set to "child". This is so the element is initially hidden. Below are the two lines of HTML used to hide and show the How is this done? section:

  <H2 CLASS="parent" CHILD="how">How is this done?</H3>
  <DIV ID="how" CLASS="child">This simple...</DIV>

  function swapDisplay() {     
    // Make sure a child element exists
    var child = event.srcElement.getAttribute("child");
    if (null!=child) {
      var el = document.all[child]
      if (null!=el)
        el.style.display = ""==el.style.display ? "block" : ""
    }
  }
  document.onclick = swapDisplay;

How is this done?

Hiding/ Showing Code