The [[Prototype]] JavaScript library provides a number of tools for manipulating the content of a view from the ClientSide. One such tool is the @Element@ object.

The @Element@ object exposes a number of methods

* toggle
* hide
* show
* remove
* getHeight


h2. toggle

The @Element.toggle()@ function will toggle the visibility of an  element. This will make visible content disapear, or invisible content appear.

h4. example

<pre>
<div id="foo">foo</div>
<a href="#" onclick="Element.toggle('foo'); return false;">toggle foo</a>
</pre>

You can toggle more than one item at by passing more names to the function

h4. example

<pre>
<div id="foo">foo</div>
<div id="bar">bar</div>
<a href="#" onclick="Element.toggle('foo','bar'); return false;">toggle foo and bar</a>
</pre>

h2. hide

The @Element.hide()@ function sets the display style for the specified element ID(s) to 'none'.

h4. example

<pre>
<div id="foo">foo</div>
<a href="#" onclick="Element.hide('foo'); return false;">hide foo</a>
</pre>

h2. show

The @Element.show()@ function sets the display style for the specified element ID(s) to ''(empty string).

h4. example

<pre>
<div id="foo" style="display: none;">foo</div>
<a href="#" onclick="Element.show('foo'); return false;">show foo</a>
</pre>

@Element.show()@ and @Element.hide()@ can both take multiple arguments, just like @Element.toggle()@

h2. remove

The @Element.remove()@ function prunes the specified element and all of its children from the DOM tree for the current view of the page.  i.e. if you refresh the page the element will return to its original position and display style.

h4. example

<pre>
<div id="foo">foo</div>
<a href="#" onclick="Element.remove('foo'); return false;">remove foo</a>
</pre>

h2. getHeight

The @Element.getHeight()@ function returns the offsetHeight of the element specified.  Generally this is the actual onscreen height of the displayed element. However, if this function is called from within a table, it might not return the value you expect.

h4. example

 In a test page I created the following table 
<pre>
<table border="1" id="mytable" cellspacing=0>
  <tr><td> table contents </td> </tr>
  <tr><td>Element.getHeight('mytable'); = 
    <script>document.write(""+Element.getHeight('mytable'));</script> 
  </td></tr>
  <tr><td> table contents </td> </tr>
  <tr><td>Element.getHeight('mytable'); = 
     <script>document.write(""+Element.getHeight('mytable'));</script> 
  </td></tr>
  <tr><td> table contents </td> </tr>
  <tr><td>Element.getHeight('mytable'); = 
    <script>document.write(""+Element.getHeight('mytable'));</script> 
  </td></tr>
</table>
</pre>

...and the output for this table looked like the following

<pre>
table contents
Element.getHeight('mytable'); = 40
table contents
Element.getHeight('mytable'); = 80
table contents
Element.getHeight('mytable'); = 120
</pre>

It appears to me that each successive call to getHeight() returned the height of the table that had been rendered up to the time of the call.  Note: any call to getHeight('mytable') after the page render had finished returned the final height of the table.

category: Howto, Stub