Introduction:

In this article, we will explain how to use slideToggle() effect or how to hide or display html elements in jQuery with example .

Description:
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 is slide 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 vales 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.

Let's take an example to demonstrate jQuery slideToggle() effect.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Tutorials</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideToggle("slow");
            });
        });
    </script>
    <style>
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: #ffdd00;
            border: solid 1px #c3c3c3;
            width: 590px;
        }
 
        #panel {
            padding: 50px;
            background-color: #ffae00;
            width: 500px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="flip">Click to slide toggle panel</div>
    <div id="panel">
        Hello sqltutorialspoint.com!
       It is the best tutorial website to learn jQuery and other languages.
    </div>
</body>
</html>


 Let's check live example

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like