JS: show / hide elements on click

Hiding and showing elements on a page is actually quite easy with these javascript functions. I'll just put in here a ready-to-use function you can copy and paste into your page. Follow these two steps:

1- Create the JS function on the header of your page

<script type="text/javascript">
<!--
function row2(){
var row2 = document.getElementById("SecondRow");

if (row2.style.display == '')
  row2.style.display = 'none';
  else row2.style.display = '';
  }
//-->
</script>

2 - Add the necessary identifiers in the body of your page

<table>
<tr id="FirstRow">
   <td><input type=text name=row1 onClick="row2()"></td>
</tr>

<tr id="SecondRow" style=display:none;>
   <td><input type=text name=row2></td>
</tr>
</table>

The result will be a table with one row that will expand to two rows when you click on the input area and back to one if you click twice.

You can still add as many rows you want on this table. Keep in mind that you will have to make identifiers and corresponding functions for all rows you want to display. Of course this can be used to hide and show any element on the page with any clickable area. Just do the tweaking you need to adapt to your situation.

This is a very cool feature that will certainly bring action to the page and interact with your visitor but remember that the user did not build the page and may feel lost with functionality that he's not used to interact with. Keep it simple and intuitive are the best advice I can give.