How to hide sub-menu when other menu clicked JQuery
<p>I'm trying to figure out one thing, I have a one page website and want hide sub-menus under portfolio when other menu links cliked <a href="http://jsfiddle.net/kuuwj/15/" rel="nofollow">http://jsfiddle.net/kuuwj/15/</a></p>

<h1>HTML</h1>

<pre><code>&lt;ul id="navbar"&gt;
    &lt;li&gt;&lt;a href="#home" id="nav-home"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#portfolio" id="nav-portfolio"&gt;Portfolio&lt;/a&gt;
        &lt;div class="portfolio-apps"&gt;
         &lt;section id="website"&gt;
            &lt;span class="button"&gt;AAAAAAAAAAAAAAAAAAAAAA&lt;/span&gt;
         &lt;/section&gt;
         &lt;section id="gterminal"&gt;
            &lt;span class="button"&gt;BBBBBBBBBBBBBBBBBBBBBB&lt;/span&gt;
         &lt;/section&gt;
         &lt;section&gt;
            &lt;span class="button"&gt;CCCCCCCCCCCCCCCCCCCCCC&lt;/span&gt;
         &lt;/section&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#about" id="nav-about"&gt;About Me&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#contact" id="nav-contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
</code></pre>

<h1>JS</h1>

<pre><code>$(document).ready(function () {
    var portf_apps = $('.portfolio-apps');
    portf_apps.hide();
    $('#nav-portfolio').click(function() {
        portf_apps.show();
    });

});
</code></pre>
