Question

Basically I am trying to show hide divs and links, but having some trouble. The functionality required is as follows:

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

Here is what I have done so far:

Markup:

<div class="row">
    <label for="native_language">Select</label>
    <select name="native_language" id="native_language">
      <option value="">Any</option>
      <option value="1">English</option>
    </select>

    <a class="show-additional-link" href="#">Select Additional Languages</a>
</div>

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

    <div class="row">
        <!-- additional language checkboxes -->
    </div>
</div>

JS:

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

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:

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

The DIV gets hidden but the ‘show-additional-link’ does not get shown.

Answer 1

Change this:

$(this).prev('.show-additional-link').show();

to this:

$(this).parent().prev("div.row").find('.show-additional-link').show();

.prev will target, strictly, the immediately previous sibling. Your .show-additional-link button is a child of the previous div, so basically you need to go up one level, get the previous div, and find the .show-additional-link descendant.