jQuery Tutorial

jQuery slideToggle method to show or hide the elements sliding down or up

jQuery slideToggle method to show or hide the selected elements sliding down or up

In jQuery, slideToggle method is used to show or hide the selected (hidden) elements in the web page.

slideToggle method combines slideDown and slideUp methods.

jquery slideToggle syntax

$(selector).slideToggle()

$(selector).slideToggle(speed of animation, easing, callback function)

In jQuery all the three parameters are optional for slideToggle method.

Speed of animation

"fast" - shows or hides the element faster.

"normal" - shows or hides the element in normal.

"slow" - shows or hides the element slower.

milliseconds - shows or hides the element animation as based on specified milliseconds.

easing

"swing" - In middle of the animation is faster but slower in beginning and end of animation.

"linear" - Animation is consistent from beginning to end.

jQuery slideDown method example to show the selected elements

This jQuery code is used to show or hide all the div elements in the page and displays the alert message 'Slide down method is completed testing!' once shown the div element.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery slideDown method</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSlideToggle').click(function () {
                $("div").slideToggle(15000, "swing", function () {
                    alert("slideToggle method is completed testing!")
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnSlideToggle" value="Slide Toggle"/>
    <div style="height:200px;width:200px;background-color:blue;color:white;">
        div element slide toggle testing!
    </div>
</body>
</html>

Output:

hidden div element

Hides div after clicking on Fade Out button

shown or hidden the div after clicking on Slide Toggle button

jQuery slideToggle with callback function

callback function is used to display the alert message once shown or hidden when clicking on Slide Toggle button.

        $(document).ready(function () {
            $('#btnSlideToggle').click(function () {
                $("div").slideToggle(function () {
                   alert('callback function!');
                });
            });
        });

Shows the div element for 10000 milliseconds, animation mode is swing (In middle of animation is faster) and callback function is used to display alert message once div element is shown or hidden.

        $(document).ready(function () {
            $('#btnSlideToggle').click(function () {
                $("div").slideToggle(10000,"swing", function () {
                    alert('slideToggle example!')
                });
            });
        });

« Previous Next »

jQuery Programming Examples

jQuery slideToggle method to show or hide the elements sliding down or up

jQuery slideToggle method to show or hide the selected elements sliding down or up

Speed of animation

easing

jQuery slideDown method example to show the selected elements

jQuery slideToggle with callback function

Simple Filter HTML Table Rows in jquery

jQuery ui datepicker with disabled date ranges

jQuery ui datepicker change event to submit the form

Getting screen coordinates in jQuery

Getting mouse positions in jQuery

Getting pressed key code in jQuery

Getting multiple elements using tag, id and class in jQuery

Checking element tag in jQuery

Getting element by index in jQuery

Highlights the odd and even rows in different colors in jQuery

Simple Filter HTML Paragraph Tags in jquery

Enable / disable HTML input fields in jQuery

Remove leading and trailing space in text of HTML element using jQuery

jQuery Adding HTML Table Row Dynamically

jQuery Deleting HTML Table Row Dynamically

jQuery Deleting Selected Multiple HTML Table Rows

jQuery Getting Selected Checkbox Values

Update page title using jquery

print objects

Update page title using jquery

print objects