jQuery .fadeToggle() Method

What You’ll Learn

The .fadeToggle() instance method displays or hides matched elements by animating their opacity. This tutorial covers both overloads since jQuery 1.4.4, the default 400 ms duration, per-element callbacks, comparisons with .fadeIn(), .fadeOut(), .toggle(), and .show() / .hide(), and five hands-on examples from the official jQuery API plus accordion and rapid-click patterns.

Introduction

Panels, dropdowns, and accordions often need the same button to show and hide content — but with a smooth fade instead of an abrupt snap. Writing if (visible) fadeOut(); else fadeIn(); works, yet jQuery bundles that logic into a single call: .fadeToggle().

Available since jQuery 1.4.4, .fadeToggle() inspects each matched element’s visibility and runs the appropriate fade. Visible elements fade out and end at display: none; hidden elements unhide and fade to full opacity. It enqueues on the default fx queue like other effects, so you can chain it with .delay(), .slideToggle(), or another animation for polished sequential choreography.

Understanding the .fadeToggle() Method

Per the official jQuery API, .fadeToggle() displays or hides the matched elements by animating their opacity. 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.

Durations are given in milliseconds; higher values indicate slower animations. The strings "fast" (200 ms) and "slow" (600 ms) work as presets. When duration is omitted, the default is 400 ms — the same default as .fadeIn() and .fadeOut().

📝 Syntax

Two overloads of .fadeToggle:

// 1) Duration, easing, and complete callback — since jQuery 1.4.4
jQuery( selector ).fadeToggle( [duration ] [, easing ] [, complete ] )
// 2) Options object — since jQuery 1.4.4
jQuery( selector ).fadeToggle( options )

Parameters

• duration (Number or String, default 400) — milliseconds, or "fast" (200) / "slow" (600).
• easing (String, default "swing") — built-in swing or linear; plugins add more.
• complete (Function) — called once per matched element when that element’s fade finishes. this is the DOM element.
• options (PlainObject) — map with duration, easing, queue, step, progress, complete, and Promise-style start, done, fail, always.

Return value

• A jQuery object for chaining further queued methods on the same set.

Official jQuery API description

// Fades first paragraph in or out with slow linear easing:
$( "button" ).first().on( "click", function() {
  $( "p" ).first().fadeToggle( "slow", "linear" );
} );

// Fades last paragraph in or out fast, logging on complete:
$( "button" ).last().on( "click", function() {
  $( "p" ).last().fadeToggle( "fast", function() {
    $( "#log" ).append( " finished " );
  } );
} );

Examples Gallery

Each example demonstrates an official jQuery API .fadeToggle() pattern or a common real-world use case. Open DevTools or use the Try-it links. Example 1 mirrors the live demo on api.jquery.com/fadeToggle/.

$( "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 toggles first paragraph with slow linear fade; button 2 toggles last paragraph fast and appends " finished " to #log

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

Each click fades #panel in or out over 400ms — visible panel fades out to display:none; hidden panel unhides and fades in

$( ".accordion-header" ).on( "click", function() {
  var $content = $( this ).next( ".accordion-content" );

  // Close other open panels
  $( ".accordion-content" ).not( $content ).filter( ":visible" ).fadeOut( 300 );

  // Toggle this panel
  $content.fadeToggle( 300 );
} );

Clicking a header toggles its content with fadeToggle(300); other visible panels fadeOut first — only one section open at a time

// Manual approach — verbose if/else
$( "#toggle-manual" ).on( "click", function() {
  var $box = $( "#box-manual" );
  if ( $box.is( ":visible" ) ) {
    $box.fadeOut( 400 );
  } else {
    $box.fadeIn( 400 );
  }
} );

// Equivalent — one line
$( "#toggle-shorthand" ).on( "click", function() {
  $( "#box-shorthand" ).fadeToggle( 400 );
} );

Both buttons toggle their boxes identically — manual uses :visible check + fadeIn/fadeOut; shorthand uses single fadeToggle(400)

$( "#rapid-toggle" ).on( "click", function() {
  $( "#rapid-panel" )
    .stop( true, true )
    .fadeToggle( 300 );
} );

Rapid clicks no longer queue stacked fades — stop(true,true) clears queue and jumps to end state before each fadeToggle(300)

🚀 Common Use Cases

• Show/hide panels — one button toggles a settings drawer, help box, or notification with a smooth fade.
• Accordions and FAQs — click a header to fadeToggle its content; pair with .fadeOut() on siblings for one-open behavior.
• Toolbar and menu items — toggle submenus or option groups without writing separate show and hide handlers.
• Inline edit forms — reveal or dismiss an edit area on the same trigger with animated feedback.
• Preview toggles — switch between summary and detail views on repeated clicks with opacity transitions.
• Effect chains — combine with .delay() and .slideToggle() for layered toggle choreography on the fx queue.

📝 Notes

• Available since jQuery 1.4.4; options overload shares the same object shape as .fadeIn() and .fadeOut().
• Default duration is 400 ms when omitted — same as .fadeIn() and .fadeOut().
• Direction is determined by visibility at call time — jQuery does not maintain a separate toggle state variable.
• On fade-out, display: none is set once opacity reaches 0; on fade-in, display is restored before opacity animates.
• Callbacks fire once per matched element — use .promise().done() for one set-level callback.
• Pair with .stop(true, true) when rapid clicks would otherwise queue conflicting fades.
• Set jQuery.fx.off = true globally to disable all effects including .fadeToggle() (duration becomes 0).

💡 Best Practices