---

Search posts under jQuery:

---

.slideToggle() - Toggle display element with sliding effect in jQuery

How to toggle display an element with sliding effect in jQuery?

To toggle display an html element with sliding effect, slidetoggle() method can be used.

<input type="button" id="btnSlideToggle" value="Slide Toggle" />

    <div id="divSlideToggle" style="height: 50px; width: 50px; background: brown; left: 0px; position: absolute; display: none;">
    </div>

    <script>
        $("#btnSlideToggle").click(function () {
            $("#divSlideToggle").slideToggle();
            // $("#divSlideToggle").slideToggle("slow", QueueIt);
        });
    </script>

In the above code when “btnSlideToggle” button will be clicked “divSlideToggle” element will toggle display with sliding effect. That means that if the element is hidden, it will be shown and vice-versa. We can also mention the second parameter as function to execute when the hide or show is complete.

.slideToggle() function is the combination of .slideUp() and .slideDown() function.