jQuery .toggle() Method

What Is .toggle()?

.toggle() shows or hides matched elements by flipping their current visibility (since jQuery 1.0). Instant with no args; with a duration it becomes an animation. Display is saved and restored like .hide() / .show().

$(".target").toggle()                 // instant flip
$("p").toggle("slow")                 // 600ms animation
$("#box").toggle(true)                // force show (1.3+)
$("#box").toggle(false)               // force hide (1.3+)
$("#box").toggle(400, function () {   // ms + complete
  // this = current element
});

// "fast" = 200ms · default animated duration = 400ms

How to Use .toggle()

Select elements, then flip visibility instantly, with a duration, or to a forced Boolean state.

1. Select the element(s) to toggle.
2. Call .toggle() for an instant flip, or pass a duration / options.
3. Or pass true / false to force show / hide (jQuery 1.3+).
4. Optionally pass a complete callback (runs once per element).

Pseudocode

for each matched element el:
    if argument is Boolean:
        if true  → show(el)   // same as .show()
        if false → hide(el)   // same as .hide()
        continue

    if el is currently visible:
        hide(el)              // save display → none
    else:
        show(el)              // restore saved display

    if duration provided:
        animate width, height, opacity during the flip
        call complete(this = el) once per element

return original matched set

Cheat Sheet

Keep these facts handy while flipping visibility.

Live Preview

Flip the sample box instantly, slowly, or force show / hide.

$("#box").toggle()
→ flips current visibility

jQuery Examples

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

$("p").toggle();

Visible paragraphs become hidden
Hidden paragraphs become visible
Still in the DOM

$("p").toggle("slow");

Paragraphs animate (~600ms)
Visibility flips when the effect finishes

var show = true;
$("p").toggle(show);   // same as .show()
show = false;
$("p").toggle(show);   // same as .hide()

toggle(true)  → paragraphs shown
toggle(false) → paragraphs hidden

$("#box").toggle(400, function () {
  console.log("done:", $(this).is(":visible"));
});

Box animates for 400ms
Then callback logs final visibility

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

Each click flips paragraph visibility
Same idea as the official jQuery demo

Performance Notes

Instant toggle is fine at scale. Animated toggle on dozens of nodes can jank — animate one container instead of every child.

Key Takeaways