Question

I was wondering how I can combine a hide function and show function into 1 toggle Function that either fades in content or fades it out, im guessing this argument would update the fade method:

This is my current effort of JS using jQuery from my object but is totally wrong:

toggleAlertOverlay: function (state) {
  var instance = this;
  if (state === hide) {
    instance.selector.fadeOut();
  }
  elseif(state === show) {
    instance.selector.fadeIn();
  }
},
toggleAlertOverlay(hide);

Answer 1

Try using .fadeToggle()

The .fadeToggle() method animates the opacity of the matched elements. When called on a visible element, the element’s display style property is set to none once the opacity reaches 0, so the element no longer affects the layout of the page.

$(<element>).fadeToggle();

Where <element> is a valid selector ….