Install a toggle (hide/show) function to an HTML element

This is not for the faint of heart, and is most useful for other programmers. It has many parameters:

<script>
   widget.installToggle(toggleObj,controlObj,togInner,styleStates,returnState);
</script>

toggleObj is the element that will be toggled. You can either pass the object itself, or an id as a string
controlObj is the element that will control it, usually a link (<a href="somepage>A Page</a>). It can be the object itself or the id as a string.
togInner is a | divided string representing the HTML inside the controlObj for the two states. Default is "Hide|Show"
styleStates is a | divided string representing the two states of the toggleObj. Possible values are anything supported by the CSS display property. Default is "block|none"
returnState is the boolean returned from the onclick event. This is especially important on links, as you may want to cancel going to the href (setting returnState = false). Default is false.

Anything with a default is optional.

Here's a real example:

<a href="#" id="Button"></a>
<div id="ToggleMe">
Hello world.<br />
<br />
I love you!
</div>

<script>
   widget.installToggle('ToggleMe','Button');
</script>

That will appear as:

Hello world.

I love you!


Page Information

  • 1 year ago [history]
  • View page source
  • You're not logged in
  • No tags yet learn more

Wiki Information

Recent PBwiki Blog Posts