/* 
   Simple JQuery Collapsing menu.
   HTML structure to use:

   <ul id="menu">
     <li><a href="#">Sub menu heading</a>
     <ul>
       <li><a href="http://site.com/">Link</a></li>
       <li><a href="http://site.com/">Link</a></li>
       <li><a href="http://site.com/">Link</a></li>
       ...
       ...
     </ul>
     <li><a href="#">Sub menu heading</a>
     <ul>
       <li><a href="http://site.com/">Link</a></li>
       <li><a href="http://site.com/">Link</a></li>
       <li><a href="http://site.com/">Link</a></li>
       ...
       ...
     </ul>
     ...
     ...
   </ul>

Copyright 2007 by Marco van Hylckama Vlieg

web: http://www.i-marco.nl/weblog/
email: marco@i-marco.nl

Free for non-commercial use
*/

function initMenu() {
  $('#one li').hide();
  $('#two li').hide();
  $('#three li').hide();
  $('#show_one a').click(
    function() {
    $('#one li').slideToggle('normal');
	$('#three li').hide(300);
	$('#two li').hide(300);
      }
    );
	$('#show_two a').click(
    function() {
    $('#two li').slideToggle('normal');
	$('#one li').hide(300);
	$('#three li').hide(300);
      }
    );
	$('#show_three a').click(
    function() {
    $('#three li').slideToggle('normal');
	$('#one li').hide(300);
	$('#two li').hide(300);
      }
    );
  $('#head a').click(
    function() {
        $('#three li').hide(300);
	$('#one li').hide(300);	
	$('#two li').hide(300);
      }
    );
  }
$(document).ready(function() {initMenu();});