CSS/DHTML Toggled Text

1. Create a block of 'subtext' that you intend to toggle. We will label this <div> (or <span>) as CLASS=toggle-subtext and identify the specific subtext block as ID=XXX_subtext. Example...
   <div class="toggle-subtext" id="Example_subtext">
2. Decide on the method of hide/reveal:
• The 'text' method uses a block of text that is designed to hide itself once expanded; the link spot is always 'hot', but the content might be invisible. We will label this <div> (or <span>) as CLASS=toggle-text and identify the block as ID=XXX_toggle. Example...
  <span class="toggle-text" id="Example_toggle">Example...</span>
• The 'widget' method will alternate an "expand" icon and a "collapse" icon; the link spot is always visible, flipping between two images. We will label this <img> as CLASS=toggle-widget and identify the image as NAME=XXX_toggle. Example...
  <img class="toggle-widget" name="Example_toggle" src="/images/right.gif" border="0">
3. If using the widget method, preload the "collapse" image somewhere on the page. FireFox is fine, but IE will not properly display this secondary image unless it has been pre-loaded. Note that you have to invoke the image, but not necessarily display it. Example...
   <img src="/images/down.gif" border="0" style="display:none">
4. Define a Javascript no-op function to receive the click event, yet do nothing. Example...
   function noop() {}
5. Wrap the widget or text-control with a link using the no-op function, and an onMouseDown() action invoking the toggleSubText('XXX') function. Example...
   <a href="javascript:noop()" onMouseDown="toggleSubText('Example')">
6. Establish CSS attributes for the toggle-* classes that define initial invisibility. Example...
   <style type="text/css">
     .toggle-subtext {display: none;}
     .toggle-text {visibility: visible;}
     .toggle-widget {visibility: visible;}
   </style>

Now you are ready for the toggleSubText() function itself.

  
function toggleSubText(id) {
  //
  // SubText is a hide/reveal block as identified by CLASS=toggle-subtext ID=<ID>_subtext
  //
  // The SubText block is controlled by either...
  // ...a text layer with CLASS=toggle-text ID=<ID>_toggle
  // ...or a collapse/expand image with CLASS=toggle-widget NAME=<ID>_toggle
  //
  var subtext; var toggle; var widget; 
  //
  if (document.getElementById) {
    toggle = document.getElementById(id + '_toggle');
    subtext = document.getElementById(id + '_subtext');
  }
  else if (document.layers) {
    toggle = document.layers[id + '_toggle'];
    subtext = document.layers[id + '_subtext'];
  }
  if (document.images[id + '_toggle']) {
    widget = document.images[id + '_toggle']
  }
  if (! subtext.style) {
    if (subtext.display == 'block') {
      subtext.display = 'none';
      if (toggle) {
        toggle.visibility = 'visible';
      }
      if (widget) {
        widget.src = "/images/right.gif";
      }
    }
    else {
      subtext.display = 'block';
      if (toggle) {
        toggle.visibility = 'hidden';
      }
      if (widget) {
        widget.src = "/images/down.gif";
      }
    }
  }
  else {
    if (subtext.style.display == 'block') {
      subtext.style.display = 'none';
      if (toggle) {
        toggle.style.visibility = 'visible';
      }
      if (widget) {
        widget.src = "/images/right.gif";
      }
    }
    else {
      subtext.style.display = 'block';
      if (toggle) {
        toggle.style.visibility = 'hidden';
      }
      if (widget) {
        widget.src = "/images/down.gif";
      }
    }
  }
}