The navigation for weee

by Cosette Girardot

HTML

<div class="text" style="position: absolute; width: 750px; left: 20px; top: -22px;">

<table border="0">
  <tbody>
    <tr class="expandable">
      <td colspan="2">
        <ul>
          <li>HOME</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

<table border="0">
  <tbody>
    <tr class="expandable">
      <td colspan="2">
        <ul>
          <li>ABOUT</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <a class="sublnk" style="padding-left: 20px;" href="#"> Fast Facts</a>
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Staff Roles</a> 
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Area Informations</a> 
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Rates</a> 
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Important Dates</a> 
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Demographic Data</a> 
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Camps-Conferences</a>
      </td>
    </tr>
  </tbody>
</table>



<table border="0">
  <tbody>
    <tr class="expandable">
      <td colspan="2">
        <ul>
          <li>EMPLOYMENT</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <a class="sublnk" style="padding-left: 20px;" href="#"> Professional Staff</a> 
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Graduate Staff</a> 
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Student Employment</a> 
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Important Dates</a> 
        <br />
        <a class="sublnk" style="padding-left: 20px;" href="#"> Summer Positions</a>
      </td>
    </tr>
  </tbody>
</table>

<table border="0">
  <tbody>
    <tr class="expandable">
      <td colspan="2">
        <ul>
          <li>FOR PARENTS</li>
       ...

JavaScript

$(document).ready(function () {
		$('.expandable').click(function () {
		$('.expandable').not(this).nextAll('tr').hide();
		$('.expandable').not(this).find('input[type="button"]').val("+");
		$(this).nextAll('tr').toggle(350);
		if( $(this).find('input[type="button"]').val() == "+")
		{
		$(this).find('input[type="button"]').val("-");
		}
		else
		{
		$(this).find('input[type="button"]').val("+");
		}
			
		});
		$('.expandable').nextAll('tr').each(function () {
		if (!($(this).is('.expandable'))) 
		{$(this).hide();	
		}
		});
		});