jQuery slideToggle() examples

jQuery slideToggle () method is used to toggle between slideUp() and slideDown() method. If the element is slide down, it will slide up the element and if it slides up, it will slide down.

Syntax

$(selector).slideToggle(speed);  
$(selector).slideToggle(speed, callback);   
$(selector).slideToggle(speed, easing, callback);  
  • speed: It specifies the speed of the delay. Its possible values are slow, fast and milliseconds.
  • easing: It specifies the easing function to be used for transition.
  • callback: It is also an optional parameter. It specifies the function to be called after completion of slideToggle() effect.

Example 1

Animates all paragraphs to slide up or down, completing the animation within 600 milliseconds.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>slideToggle demo</title>
    <style>
        p {
            width: 400px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <button>Toggle</button>
    <p>
        This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!
    </p>

    <script>
        $("button").click(function() {
            $("p").slideToggle("slow");
        });
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#flip").click(function() {
                $("#panel").slideToggle("slow");
            });
        });
    </script>
    <style>
        #panel,
        #flip {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }

        #panel {
            padding: 50px;
            display: none;
        }
    </style>
</head>

<body>

    <div id="flip">Click to slide the panel down or up</div>
    <div id="panel">Hello world!</div>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

References

Comments