Is there a more efficient way to do this.( Show Hide Divs / Hide Previously shown Div)?
<p>I am unfortunately not the best Jquery programmer but I thought I would give this a try to see what i could come up with. It works however I don't think it is the best way to accomplish what i am after.</p>

<p>HTML MARKUP:</p>

<pre><code>&lt;ul class="top-menu"&gt;
&lt;li&gt;&lt;a href="#" class="drop"&gt;Sign In&lt;/a&gt;
    &lt;div id="panel_1" class="panel left"&gt;
    CONTENT 1
    &lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="drop"&gt;Register&lt;/a&gt;
    &lt;div id="panel_2" class="panel left"&gt;
    CONTENT 2
    &lt;/div&gt;
&lt;/li&gt;
</code></pre>

<p></p>

<p>JQuery Code:</p>

<pre><code>$(document).ready(function () {
        var visId = null;
        $(".top-menu li a.drop").click(function () {

            var parent = $(this).parent();
            var panel = $(parent).find("div.panel");
            if ($(visId) != null &amp;&amp; $(visId).is(":visible")) {
                if ($(visId).attr("id") != $(panel).attr("id")) {
                    $(visId).slideUp("fast");
                }
            }

            $(panel).slideDown(function () {
                $(this).slideDown();
                visId = $(this);
            });
        });

    });
</code></pre>
