Toggle div states won't work on self clicks
<p>What I want: to have a divs toggle between show/hide associated divs on click. This would include if I click on a link and then re-click same link it should toggle states.</p>

<p>What I am using     </p>

<pre><code>function toggleVisibility(newSection) {
    $(".section").not("#" + newSection).hide();
    $("#" + newSection).show();
}
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;div id="navigation"&gt;
    &lt;ul id="navbar"&gt;
        &lt;li&gt;&lt;a id="home" class="active" href="#"&gt;&lt;span&gt;&lt;/span&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="depot" onclick="toggleVisibility('depots_panel');" href="#"&gt;&lt;span&gt;&lt;/span&gt;Depot&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="reports" onclick="toggleVisibility('reports_panel');"&gt;&lt;span&gt;&lt;/span&gt;Reports&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="admin"&gt;&lt;span&gt;&lt;/span&gt;Admin&lt;/a&gt;&lt;/li&gt;   
        &lt;li&gt;&lt;a id="logout" href="#" onclick="logOut();"&gt;&lt;span &gt;&lt;/span&gt;Log Out&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
</code></pre>

<p>Currently when I click between links the divs will toggle between each other but nothing I've tried seems to make a link toggle when it's self clicked. It's probably simple and I just can't see it. Any help would be MOST appreciated!</p>
