jQuery Function not doing what is expected

Question

I've just been creating a fadeIn/fadeOut menu with an active class. See code below:

JSFiddle

jQuery(document).ready(function ($) {


var navItem1 = $('#exemption-nav-1'),
    navItem2 = $('#exemption-nav-2'),
    navItem3 = $('#exemption-nav-3'),
    displayItem1 = $('#exemption-item-1'),
    displayItem2 = $('#exemption-item-2'),
    displayItem3 = $('#exemption-item-3');


function fadeOutAll() {
    (displayItem1).stop().fadeOut('slow', function () {
        navItem1.removeClass('exemption-active');
        (displayItem2).stop().fadeOut('slow', function () {
            navItem2.removeClass('exemption-active');
            (displayItem3).stop().fadeOut('slow', function () {
                navItem3.removeClass('exemption-active');
            });
        });
    });
}

navItem1.click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    fadeOutAll(function () {
        navItem1.addClass('exemption-active');
        displayItem1.stop().fadeIn();
    });
});


navItem2.click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    fadeOutAll(function () {
        navItem2.addClass('exemption-active');
        displayItem2.stop().fadeIn();
    });
});


navItem3.click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    fadeOutAll(function () {
        navItem3.addClass('exemption-active');
        displayItem3.stop().fadeIn();
    });
});
});

So I've got this to work without calling that "fadeOutAll" function, but when I actually create that function it all breaks. Any idea?

So all in all I want it to switch between the tabs with the active showing. See this JSFIDDLE As you can see this works but I was just trying to condence the code by using a function. Is this possible?

Answer 1

Essentially your code issue boils down:

function doThis() {
  // do nothing
}

$("#clickme").click(function() {
  doThis(function() {
    alert("clicked");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' id='clickme'>click</button>

which does ... nothing.

You need to tell fadeOutAll (doThis above) that it's going to receive an anonymous/inline function and what to do with it:

function doThis(todo) {
  todo();
}

$("#clickme").click(function() {
  doThis(function() {
    alert("clicked");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' id='clickme'>click</button>