Question

I’m trying to use jQuery to show and hide two overlay DIVs when I click on links in the footer (see markup below). The jQuery behaves as expected if I’ve clicked on one of the links: it hides the other overlay and shows the DIV that matches the link I clicked on. If I click on Terms and Conditions and then click on Terms and Conditions again, it hides the DIV and then shows the same DIV again. I want to hide the DIV if it’s already visible. (I initially tried .toggle and the behavior was the same.)

Links in the footer:

<a href="#terms">Terms and Conditions</a>
<a href="#privacy">Privacy Policy</a>

DIVs in the HTML:

<div class="meta" id="terms">Terms and Conditions</div>
<div class="meta" id="privacy">Privacy Policy</div>

jQuery:

$('footer a').click(function(e){
    $('.meta').hide();
    var div_to_show = $(this).attr('href');
    if($(div_to_show).is(':visible')) {
        // hide corresponding div if it's visible
        $(div_to_show).hide('fast');
    } else {
        // show corresponding div if it's not visible
        $(div_to_show).show('fast');
    }
    e.preventDefault();
});

This worked:

if($(this.hash).is(':visible')) {
    $('.meta').hide('fast');
} else {
    $('.meta').hide('fast');
    $(this.hash).show('fast');
}
e.preventDefault();

Answer 1

The right way to do it:

var $meta = $('.meta');
$('footer a').click(function(e){
    var $div = $($(this).attr('href'));
    $meta.not($div).hide();
    $div.toggle('fast');
    return false;
});

• Use .toggle()
• Cache jQuery selectors when appropriate

Demo