jQuery .toggle() Method

What You’ll Learn

The .toggle() method flips visibility on matched elements — show if hidden, hide if visible. This tutorial covers instant toggling since jQuery 1.0, the Boolean form since 1.3, animated toggles with "slow" and "fast", complete callbacks, comparisons with .show() and .hide(), the deprecated event-handler overload, the official jQuery API demos, and five practical try-it examples.

Introduction

Many UI controls need a single action that switches between two states: open a menu or close it, expand a panel or collapse it, show details or hide them. Instead of checking visibility and calling .show() or .hide() manually, jQuery provides .toggle().

With no parameters, .toggle() inspects each matched element. If it is visible, jQuery hides it; if hidden, jQuery shows it. The flip is instant and jQuery saves the original display value the same way .hide() and .show() do.

Since jQuery 1.3 you can pass true or false to force show or hide without flipping. Pass a duration for animated toggles. Pair with .hide() and .show() when you always know the direction. Browse the jQuery DOM hub for related methods.

Understanding the .toggle() Method

.toggle( [duration ] [, complete ] ) operates on a jQuery collection. Each matched element is flipped independently; the method returns the same collection for chaining. Hidden elements become visible; visible elements become hidden.

Important: jQuery also had a different .toggle( handlerA, handlerB ) overload for alternating click handlers. That event version was deprecated in jQuery 1.8 and removed in jQuery 1.9. Modern code uses .on( "click", fn ) with a state variable instead. This tutorial covers the visibility .toggle() only.

📝 Syntax

jQuery .toggle() supports several forms:

Instant toggle — since 1.0

.toggle()

• No arguments — flip visibility immediately with no animation.
• Visible elements hide; hidden elements show.

Boolean toggle — since 1.3

.toggle( display )

.toggle( true )   // same as .show()
.toggle( false )  // same as .hide()

Animated toggle with duration

.toggle( duration [, complete ] )

.toggle( "slow" )   // 600 ms
.toggle( "fast" )    // 200 ms
.toggle( 400 )        // 400 ms

Official toggle pattern

$( "button" ).on( "click", function() {
  $( "p" ).toggle();
} );

Examples Gallery

Example 1 follows the official jQuery API documentation. Examples 2–5 cover animated toggles, Boolean forcing, image flip with callback, and a practical accordion menu. Use DevTools or the Try-it links to run each snippet in the browser.

$( "button" ).on( "click", function() {
  $( "p" ).toggle();
} );

// Each click: visible → hidden, hidden → visible
// Instant — no animation

Click "Toggle": visible paragraphs hide, hidden ones show
Second click: state flips back
Both "Hello" and "Good Bye" toggle together

Official jQuery API Example 1 pattern

$( "button" ).on( "click", function() {
  $( "p" ).toggle( "slow" );
} );

Click "Toggle 'em": visible paragraphs shrink/fade out (600 ms)
Hidden paragraphs grow/fade in (600 ms)
Direction depends on current state

Official jQuery API Example 2 pattern

var flip = 0;

$( "button" ).on( "click", function() {
  $( "p" ).toggle( flip++ % 2 === 0 );
} );

// Even clicks: .toggle(true)  → show all
// Odd clicks:  .toggle(false) → hide all

Click 1: flip=0 → toggle(true) → all paragraphs shown
Click 2: flip=1 → toggle(false) → all paragraphs hidden
Click 3: toggle(true) again …

Official jQuery API Example 3 pattern — since 1.3

$( "#clickme" ).on( "click", function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  } );
} );

First click: #book hides slowly (was visible)
Second click: #book shows slowly (was hidden)
Callback fires after each element's animation completes

Official jQuery book demo pattern

$( ".accordion-heading" ).on( "click", function() {
  $( this ).next( ".accordion-panel" ).toggle( "fast" );
} );

// Each heading toggles only its own panel
// "fast" = 200 ms animation

Click "Section A": panel A toggles open/closed (200 ms)
Click "Section B": panel B toggles independently
Panels start hidden in CSS (display: none)

Practical accordion without a plugin

🚀 Common Use Cases

• Toggle buttons — one click shows or hides a panel without if/else.
• Accordion menus — expand and collapse FAQ sections or settings groups.
• Mobile nav — hamburger icon toggles the navigation drawer.
• Details disclosure — “Read more” links flip extra content.
• Forced state — use .toggle(true/false) when logic already knows the target visibility.
• Animated flip — pass "slow" or a millisecond value for smooth transitions.

📝 Notes

• Available since jQuery 1.0; Boolean form since 1.3; easing since 1.4.3.
• No-argument form flips instantly — visible hides, hidden shows.
• .toggle(true) equals .show(); .toggle(false) equals .hide().
• "slow" = 600 ms, "fast" = 200 ms; numeric default when animating is 400 ms.
• Event-handler .toggle(fn, fn) was removed in jQuery 1.9 — not the same as visibility toggle.
• Callback runs once per matched element after its animation completes.
• Does not override display: none !important — use .toggleClass() instead.

💡 Best Practices