jQuery slideUp element A if visible then slideDown element B
<p>I have the following HTML form:-</p>

<pre><code>&lt;form id="subform"&gt;
    &lt;p&gt;
        &lt;input type="button" id="btn" value="Go!"/&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;select id="optlist"&gt;
            &lt;option value="1"&gt;Option 1&lt;/option&gt;
            &lt;option value="2"&gt;Option 2&lt;/option&gt;
            &lt;option value="3"&gt;Option 3&lt;/option&gt;
        &lt;/select&gt;
    &lt;/p&gt;
&lt;/form&gt;
</code></pre>

<p>And the following jQuery snippet:-</p>

<pre><code>$("#btn").click(function () {
    // if address select list is visible slide it up and then slide down new &lt;p&gt; tag
    if ($('#optlist').is(":visible")) {
        $('form &gt; p:nth-child(2)').slideUp('slow', function () {
            $('&lt;p id="noresults"&gt;No results found&lt;/p&gt;').insertAfter('form &gt; p:nth-child(2)').hide().slideDown("slow");
        });
    }
    // else if select list is not visible just slide down the new &lt;p&gt; tag
    else {
        $('&lt;p id="noresults"&gt;No results found&lt;/p&gt;').insertAfter('form &gt; p:nth-child(2)').hide().slideDown("slow");
    }
});
</code></pre>

<p>What I want to do is, if <code>#optlist</code> is currently visible <code>slideUp()</code> THEN <code>slideDown()</code> a new <code>&lt;p&gt;</code> tag, otherwise just <code>slideDown()</code> a new <code>&lt;p&gt;</code> tag (if the <code>#optlist</code> is currently hidden).</p>

<p>This works fine above, although it's a bit clunky, for example I have to repeat the insertion of the new <code>&lt;p&gt;</code> in both the <code>if</code> and the <code>else</code> statement.</p>

<p>Also in addition to this, there is a small bug, if the <code>#noresults &lt;p&gt;</code> tag already exists it will currently add another one, how could i get it to flash the current <code>#noresults</code> if it already exists ?</p>

<p>I could check to see if it exists using <code>if ( $("#noresults").length ) {};</code> but i would also need to repeat this (in the <code>if</code> and <code>else</code>).</p>

<p>I could put the checking and creation of the new <code>&lt;p&gt;</code> in a function and make a call to it.</p>

<p>Is there a better way of structuring the current code ?</p>

<p>Fiddle <a href="http://jsfiddle.net/general_exception/zjUXV/6/" rel="nofollow">here</a></p>
