Question

I have two links, “.sp” and “.sl” when you click they change the visibility of some content (“#live”) and (“#paid”), a low level type of tab interface i guess. I ad a class of ‘active’ on click and remove the class on the other link if it had it. This seems a bit bloated for such a small function, is there a better way to write this?

$(function() {
    $('#live').hide();
    $('.sp').click(function() {
        $(this).addClass('active');
        $('#paid').show();
        $('#live').hide();
        $('.sl').removeClass('active');
    });
    $('.sl').click(function() {
        $(this).addClass('active')
            $('#live').show();
            $('#paid').hide();
            $('.sp').removeClass('active');
    });
});

Answer 1

I’d suggest a utility function that can do the common work for you and be called both places.

$(function() {
    function clickCommon(current, newItem, oldItem, deactive) {
        $(current).addClass('active');
        $(newItem).show();
        $(oldItem).hide();
        $(deactive).removeClass('active');    
    }

    $('#live').hide();
    $('.sp').click(function() {
        clickCommon(this, "#paid", "#live", ".sl");
    });
    $('.sl').click(function() {
        clickCommon(this, "#live", "#paid", ".sp");
    });
});