Question

When I click on the ‘slide-toggle’ link, my url turns from mysite.com to mysite.com/#

I was told that I needed to put a ‘return false’ somewhere in here but I’m not sure where. Can someone kindly help me out?

$(document).ready(function() {
    $('a#slide-up').click(function () {
        $('.slide-container').slideUp(function(){
            $('#slide-toggle').removeClass('active');
        });
        return false;
    });

    $('a#slide-toggle').click(function() {
        var slideToggle = this;
        if ($('.slide-container').is(':visible')) {
            $('.slide-container').slideUp(function() {
                $(slideToggle).removeClass('active');
            });
        }
        else {
            $('.slide-container').slideDown();
            $(slideToggle).addClass('active');
        }
    });
});

Answer 1

It would be nicer not to use return false but to use event.preventDefault instead. You can put this at the very top of your event handler:

$('a#slide-toggle').click(function(e) { // note e added as the function's parameter
    e.preventDefault();

    var slideToggle = this;
    if ($('.slide-container').is(':visible')) {
        $('.slide-container').slideUp(function() {
            $(slideToggle).removeClass('active');
        });
    }
    else {
        $('.slide-container').slideDown();
        $(slideToggle).addClass('active');
    }
});

This has the same effect as return false, but with the following advantages:

• It is semantically more logical — it does what it says
• You can put it at the head of the function, so it is immediately obvious
• You can have multiple exit points without having to ensure they are all return false
• If any part of your code causes an error, the default action will still be prevented