How To Toggle an Element's Display Off and On

Basic Procedure

• Give a page element an ID and a style of display:none
• Add an "onclick" event to a checkbox or link with a javascript call that refers to the ID
• Clicking the checkbox or link on a published page will cause the display of the element to toggle display:none on and off
• The code of the javascript is maintained in a library that is automatically added to all pages

Items in Detail

• In the rich text editor, check the tab in the lower left to edit the HTML directly.
• This is an example of a checkbox that would control the display of an element with and ID set to "asdf"

  <p>
  Click Me:
  <input type="checkbox" onclick="drexel.HideShow('asdf');" />
  </p>

• This is an example of a link instead of a checkbox that would do the same thing:

  <p>
  <a href="#" onclick="drexel.HideShow('asdf');">Click Me</a>
  </p>

• Somewhere on the same page, create the element that should be toggled off and on.
• This is an example of a paragraph that will start in the "OFF" state:

  <p id="asdf" style="display:none;">
  I toggle off and on.
  </p>

• In this example, the div will also start in the "OFF" state, but uses a class with a predefined style:

  <div id="asdf" class="hide">
  I toggle off and on.
  </div>

• In this example, the span will start in the "ON" state, but will still toggle off and on

  <span id="asdf"> I toggle off and on. </span>

Last Modified: 8/13/09 dmt34