The navigation

by Cosette Girardot

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="text" style="position: absolute; width: 750px; left: 20px; top:-22px;">
  
  <table border="0">
    <tbody>
      <tr class="expandable">
        <td colspan="2">
          <a class="titlelnk"><strong><li>Home</li></strong></a>
        </td>
      </tr>
    </tbody>
  </table>
  <table border="0">
    <tbody>
      <tr class="expandable">
        <td colspan="2">
          <a class="titlelnk"><strong><li>ABOUT</li></strong></a>
        </td>
      </tr>
      <tr>
      <td>
        <a style="padding-left: 20px;"> Fast Facts</a>
        <br/><a style="padding-left: 20px;"> Staff Roles</a>
        <br/><a style="padding-left: 20px;"> Area Informations</a>
        <br/><a style="padding-left: 20px;"> Rates</a>
        <br/><a style="padding-left: 20px;"> Important Dates</a>
        <br/><a style="padding-left: 20px;"> Demographic Data</a>
        <br/><a style="padding-left: 20px;"> Camps-Conferences</a>
        </td>
        </tr>
    </tbody>
  </table>
  <table border="0">
    <tbody>
      <tr class="expandable">
        <td colspan="2">
          <a class="whitelnk"><strong><li>EMPLOYMENT</li></strong></a>
        </td>
      </tr>
     <tr>
      <td>
        <a style="padding-left: 20px;"> Professional Staff</a>
        <br/><a style="padding-left: 20px;"> Graduate staff</a>
        <br/><a style="padding-left: 20px;"> Area Informations</a>
        <br/><a style="padding-left: 20px;"> Rates</a>
        <br/><a style="padding-left: 20px;"> Important Dates</a>
        <br/><a style="padding-left: 20px;"> Demographic Data</a>
        <br/><a style="padding-left: 20px;"> Camps-Conferences</a>
        </td>
        </tr>
    </tbody>
  </table>
  <table border="0">
    <tbody>
      <tr class="expandable">
        <td colspan="2">
          <a...

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();
	    }
	  });
	});