Toggle Multiple Drop Down Menus in jQuery
<p>I have a simple nav menu with each item having 5 sub-items. I want the sub-itmes to be closed when the page loads. Only the first set is closed though when the page loads. 
Any feedback would be very helpful.  Thanks.</p>

<pre><code>&lt;script type="text/javascript" src="jquery-1.5.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready( function(){
$('#project').hide();   
$('h5').click( function(){          $(this).toggleClass('closed').next('#project').slideToggle().siblings('#project').slideUp();
    $(this).siblings('h5').removeClass('closed');
});                    
});

&lt;/script&gt;
</code></pre>

<p>And here is part of the menu code:</p>

<pre><code> &lt;div id="sidebar_nav"&gt;
  &lt;h5&gt;Education&lt;/h5&gt;
    &lt;p id="project"&gt;
    &lt;a href="edu_project1.htm"&gt;project 1&lt;/a&gt;&lt;br /&gt;
    &lt;a href="edu_project2.htm"&gt;project 2&lt;/a&gt;&lt;br /&gt;
    &lt;a href="edu_project3.htm"&gt;project 3&lt;/a&gt;&lt;br /&gt;
    &lt;a href="edu_project4.htm"&gt;project 4&lt;/a&gt;&lt;br /&gt;
    &lt;a href="edu_project5.htm"&gt;project 5&lt;/a&gt;&lt;/p&gt;
  &lt;h5&gt;Health Care&lt;/h5&gt;
    &lt;p id="project"&gt;
    &lt;a href="hc_project1.htm"&gt;project 1&lt;/a&gt;&lt;br /&gt;
    &lt;a href="hc_project2.htm"&gt;project 2&lt;/a&gt;&lt;br /&gt;
    &lt;a href="hc_project3.htm"&gt;project 3&lt;/a&gt;&lt;br /&gt;
    &lt;a href="hc_project4.htm"&gt;project 4&lt;/a&gt;&lt;br /&gt;
    &lt;a href="hc_project5.htm"&gt;project 5&lt;/a&gt;&lt;/p&gt;
  &lt;h5&gt;Housing&lt;/h5&gt;
     &lt;p id="project"&gt;
    &lt;a href="hs_project1.htm"&gt;project 1&lt;/a&gt;&lt;br /&gt;
    &lt;a href="hs_project2.htm"&gt;project 2&lt;/a&gt;&lt;br /&gt;
    &lt;a href="hs_project3.htm"&gt;project 3&lt;/a&gt;&lt;br /&gt;
    &lt;a href="hs_project4.htm"&gt;project 4&lt;/a&gt;&lt;br /&gt;
    &lt;a href="hs_project5.htm"&gt;project 5&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
