jQuery .fadeToggle() Method

What Is .fadeToggle()?

.fadeToggle() (since jQuery 1.4.4) displays or hides matched elements by animating their opacity. Visible elements fade out and get display: none; hidden elements unhide and fade in. Returns the jQuery object for chaining.

$("#panel").fadeToggle();           // default 400 ms
$("#panel").fadeToggle("slow", "linear");
$("#panel").fadeToggle("fast", function () { /* done */ });

// Visible → fade out → display:none
// Hidden  → show → fade in to opacity 1

How to Use .fadeToggle()

Select the element, call .fadeToggle() from a click (or other) handler, optionally pass duration, easing, or a callback.

1. Select the target with jQuery ($("#panel")).
2. On a user action, call .fadeToggle() (optional duration / easing / complete).
3. jQuery checks visibility and runs fade-in or fade-out.
4. On fade-out, display: none is set when opacity hits 0.
5. For spam clicks, chain .stop(true, true) before .fadeToggle().

Pseudocode

call $(elements).fadeToggle(duration?, easing?, complete?)

for each matched element:
    if element is visible:
        animate opacity → 0
        set display: none
    else:
        restore display
        animate opacity → 1

    if complete was provided:
        call complete once for this element
        (this = the DOM element)

return the jQuery set for chaining

Cheat Sheet

Keep these facts handy while building fade toggles.

Live Preview

Click Run to fadeToggle the sample paragraph. Change duration with the chips.

Ready — click Run to fadeToggle.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("button").first().on("click", function () {
  $("p").first().fadeToggle("slow", "linear");
});

$("button").last().on("click", function () {
  $("p").last().fadeToggle("fast", function () {
    $("#log").append(" finished ");
  });
});

Button 1 → first p fades slow + linear
Button 2 → last p fades fast
#log gets " finished " when button 2's fade ends

$("#toggle").on("click", function () {
  $("#panel").fadeToggle();
});

Click 1 → #panel fades out → display:none
Click 2 → #panel unhides and fades in
Duration = 400 ms (default)

$(".acc-head").on("click", function () {
  var $body = $(this).next(".acc-body");

  $(".acc-body").not($body).filter(":visible").fadeOut(300);
  $body.fadeToggle(300);
});

Click Section B → A fades out (if open)
B fades in (or out if it was already open)
Only one section stays visible

// Manual
$("#runManual").on("click", function () {
  var $el = $("#manual");
  if ($el.is(":visible")) {
    $el.fadeOut(400);
  } else {
    $el.fadeIn(400);
  }
});

// Equivalent shorthand
$("#runToggle").on("click", function () {
  $("#toggle").fadeToggle(400);
});

Both buttons toggle their boxes the same way
Manual = if/else + fadeOut/fadeIn
Shorthand = single fadeToggle(400)

$("#spam").on("click", function () {
  $("#msg").stop(true, true).fadeToggle(300);
});

Rapid clicks no longer stack fades
stop(true, true) clears queue + jumps to end
Then fadeToggle(300) starts clean

Performance Notes

Opacity fades are inexpensive for a few elements. Cost climbs with large sets or stacked queues — stop before toggle, and prefer fading one wrapper over dozens of children.

Key Takeaways