jQuery toggle()

toggle() switches matched elements between shown and hidden states. It is useful when the same control should alternate visibility each time it is activated.

toggle() Syntax Top ↑

$("#d1").toggle();

Toggle on a Click Top ↑

$("#b1").on("click", function () {
    $("#d1").toggle();
});

Demo: toggle an element →

Control the Transition Speed Top ↑

Like show() and hide(), toggle() can animate the change when you pass a duration.

$("#d1").toggle("fast");
$("#d1").toggle(600);

Demo: toggle with different durations →

If you want the transition to change opacity instead of using the show/hide animation, use fadeToggle(). For vertical expanding and collapsing, use slideToggle().

← Previous: show() / hide() · jQuery Effects · Next: fadeIn() / fadeOut() →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: