jQuery show/hide rule
<p>Basically I am trying to show hide divs and links, but having some trouble. The functionality required is as follows:</p>

<ul>
<li>On page load, DIV ID 'additional-languages' is hidden</li>
<li>User can click the 'Selected Additional Languages' link which will show the 'additional-languages' DIV</li>
<li>At the point of clicking this link, the link will get hidden</li>
<li>User can then choose to hide the 'additional-languages' DIV by clicking on the 'hide' link</li>
<li>At the point of clicking this link, the 'Selected Additional Languages' link will re-appear</li>
</ul>

<p>Here is what I have done so far:</p>

<p>Markup:</p>

<pre><code>&lt;div class="row"&gt;
    &lt;label for="native_language"&gt;Select&lt;/label&gt;
    &lt;select name="native_language" id="native_language"&gt;
      &lt;option value=""&gt;Any&lt;/option&gt;
      &lt;option value="1"&gt;English&lt;/option&gt;
    &lt;/select&gt;

    &lt;a class="show-additional-link" href="#"&gt;Select Additional Languages&lt;/a&gt;
&lt;/div&gt;

&lt;div id="additional-languages" style="display: none;"&gt;
    &lt;a class="hide-additional-link" href="#"&gt;[hide]&lt;/a&gt;

    &lt;div class="row"&gt;
        &lt;!-- additional language checkboxes --&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>$('.show-additional-link').click(function(){
    $(this).parent().next().slideDown();
    $(this).hide();
    return false;
});
</code></pre>

<p>The first part is working for me, but I'm struggling on getting the second part to work, i.e. the functionality for the 'hide-additional-link'. I have tried this:</p>

<pre><code>$('.hide-additional-link').click(function(){
    $(this).parent().slideUp();
    $(this).parent().prev('.show-additional-link').show();
    return false;
});
</code></pre>

<p>The DIV gets hidden but the 'show-additional-link' does not get shown.</p>
