Question

Is there any difference between doing this:

$(".topHorzNavLink").click(function() {

    var theHoverContainer = $("#hoverContainer");

    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {
        if ($("#hoverContainer").is(":visible") == true) { 
            $("#hoverContainer").slideUp('slow');
        } else {                
            $("#hoverContainer").slideDown('slow');
        }
    }

});

or this:

$(".topHorzNavLink").click(function() {

    var theHoverContainer = $("#hoverContainer");

    var thisHorzLink = $(this).attr('linkItem');

    if (thisHorzLink == "link2") {
        if (theHoverContainer.is(":visible") == true) { 
            theHoverContainer.slideUp('slow');
        } else {                
            theHoverContainer.slideDown('slow');
        }
    }

});

Answer 1

Your second method is more efficient because it runs the selector operation $("#hoverContainer") only once and uses the same jQuery object over and over rather than run the same selector operation three times and construct three new jQuery objects each time.

For compactness and efficiency, you could do this:

$(".topHorzNavLink").click(function() {
    if ($(this).attr('linkItem') == "link2") {
        $("#hoverContainer").slideToggle('slow');
    }
});

Or, if the linkItem attribute is not dynamically assigned/changed, you could bake it into the selector like this:

$(".topHorzNavLink[linkItem='link2']").click(function() {
    $("#hoverContainer").slideToggle('slow');
});