Question

I have this:

$("#about-us .faq-cta").click(function () {
    $('#faq').load('faqs.html #main').delay(100).slideToggle('1000', "easeOutQuad", function () {
        $.waypoints('refresh');
        $("#siteNav li a").removeClass("siteNavSelected");
    }, {
        offset: function () {
            return $.waypoints('viewportHeight') - $(this).outerHeight();
        }
    });
});

And this:

if (window.location.hash.toLowerCase() === "#faq") {
    $("#about-us .faqCta").click(function () {
        $('#faq').load('faqs.html #main').delay(100).slideToggle('1000', "easeOutQuad", function () {
            $.waypoints('refresh');
            $("#siteNav li a").removeClass("siteNavSelected");
        }, {
            offset: function () {
                return $.waypoints('viewportHeight') - $(this).outerHeight();
            }
        });
    });
}

Each do exactly the same thing.

Is there a way to write a bit of shorthand to combine the two?

Answer 1

Use:

var fcOnClick = function () {
    $('#faq').load('faqs.html #main').delay(100).slideToggle('1000', "easeOutQuad", function () {
        $.waypoints('refresh');
        $("#siteNav li a").removeClass("siteNavSelected");
    }, {
        offset: function () {
            return $.waypoints('viewportHeight') - $(this).outerHeight();
        }
    });
};

var $cont= $('#about-us');
$('.faq-cta',$cont).click(fcOnClick);
if(window.location.hash.toLowerCase() === "#faq"){
    $('.faqCta',$cont).click(fcOnClick);
}