jQuery toggle() Method

The toggle() method switches an element between visible and hidden states. Each time you call it, the element hides if it was visible, or shows if it was hidden. It is the shorthand replacement for writing hide() and show() separately.

Basic Syntax

$(selector).toggle();                  // toggle instantly
$(selector).toggle(speed);             // with animation speed
$(selector).toggle(speed, callback);   // with speed and callback

Speed Values

"slow"   → 600ms
"fast"   → 200ms
400      → 400ms (default, any number in milliseconds)

Diagram: toggle() Switching States

  Element starts as: VISIBLE
       │
  toggle() called
       │
  Element becomes: HIDDEN
       │
  toggle() called again
       │
  Element becomes: VISIBLE
       │
  toggle() called again
       │
  Element becomes: HIDDEN    ...and so on

Basic Example — Show/Hide Panel

HTML:
<button id="toggleBtn">Show / Hide Info</button>
<div id="infoPanel">
    <p>This is the information panel.</p>
</div>

jQuery:
$(document).ready(function() {
    $("#toggleBtn").click(function() {
        $("#infoPanel").toggle();
    });
});

Each click on the button hides or shows the panel. No need to check if it is currently visible — jQuery handles that automatically.

toggle() with Speed

$(document).ready(function() {
    $("#toggleBtn").click(function() {
        $("#infoPanel").toggle("slow");
    });
});

The panel fades and slides into view slowly instead of snapping.

toggle() with Callback

$(document).ready(function() {
    $("#toggleBtn").click(function() {
        $("#box").toggle(400, function() {
            console.log("Toggle complete!");
        });
    });
});

The callback runs after the animation finishes, whether the element was shown or hidden.

Practical: FAQ Accordion

HTML:
<div class="faq-item">
    <h4 class="faq-question">What is jQuery?</h4>
    <p class="faq-answer">jQuery is a JavaScript library that simplifies DOM manipulation.</p>
</div>
<div class="faq-item">
    <h4 class="faq-question">Is jQuery free?</h4>
    <p class="faq-answer">Yes, jQuery is completely free and open source.</p>
</div>

jQuery:
$(document).ready(function() {
    $(".faq-answer").hide();  // hide all answers initially

    $(".faq-question").click(function() {
        $(this).next(".faq-answer").toggle("fast");
    });
});

Diagram: FAQ Toggle

  [What is jQuery?]  ← user clicks
       │
  .faq-answer is currently hidden → toggle() shows it
       │
  [What is jQuery?]
  jQuery is a JavaScript library...   ← now visible

  [What is jQuery?]  ← user clicks again
       │
  .faq-answer is currently visible → toggle() hides it

toggleClass() — CSS Class Version of toggle()

While toggle() hides or shows elements, toggleClass() adds or removes a CSS class. They are different methods but follow the same switching concept.

// toggle() → hides or shows the element
$(".panel").toggle();

// toggleClass() → adds or removes a class
$(".btn").toggleClass("active");

Detecting the Current State with is(":visible")

Sometimes you need to check whether an element is visible before deciding what to do. Use is(":visible") for this.

$(document).ready(function() {
    $("#toggleBtn").click(function() {
        if ($("#panel").is(":visible")) {
            $("#toggleBtn").text("Show Panel");
        } else {
            $("#toggleBtn").text("Hide Panel");
        }
        $("#panel").toggle();
    });
});

toggle() vs hide() + show()

Quick Summary

• toggle() switches an element between visible and hidden on every call.
• Add a speed parameter for smooth animation: "slow", "fast", or milliseconds.
• An optional callback function runs when the toggle animation completes.
• Use is(":visible") to check the current state before toggling.
• toggleClass() is a related method that switches CSS classes instead of visibility.

Practical: Mobile Navigation Toggle

A hamburger menu button shows and hides the navigation links on small screens. toggle() handles the switching with a single line.

$(document).ready(function() {
    $(".hamburger").click(function() {
        $("#mobileNav").toggle("fast");
        $(this).toggleClass("open");
    });
});

The class open on the hamburger lets CSS rotate the icon. The nav slides in and out with each tap.