---

Search posts under jQuery:

---

.toggle() - Toggle display element in jQuery

How to toggle display an element in jQuery?

To toggle display a html element, toggle() method can be used.

<input type="button" id="btnToggle" value="Toggle" />

    <div id="divToggle" style="height: 50px; width: 50px; background: brown; left: 300px; position: absolute;">
    </div>

    <script>
        $("#btnToggle").click(function () {
            $("#divToggle").toggle("slow");
        });
    </script>

In the above code, on click of “btnToggle” button “divToggle” element toggle display (ie. if the element is hidden then it will be shown and vice versa). A second parameter as function name can also be specified as we were doing for slideToggle() to execute when the toggle animation is complete.

.toggle() function is the combination of .hide() and .show() function.