Why are use the slideToggle() in Jquery, expain with example>

0 votes
59 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

Why are use the slideToggle() in Jquery, expain with example>

1 Answer

1 votes
Ravi Vishwakarma answered 29-Jul-2021 by Ravi Vishwakarma

Slidetoggle is the combination of slideup and slideon function. If an element is moved down, slideToggle() turns it up, the same action continues.

Syntax:
$(selector).slideToggle(speed);
$(selector).slideToggle(speed,callback);
Speed and callback is an optional parameter. Speed specifies the delay of showing elements these possible vales are 'slow', 'fast' and milliseconds. Callback function to be called after completion of slideToggle().
<!DOCTYPE html>

<html>
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script>
        $(document).ready(function () {
            $('#flip').click(function () {
                $('#panel').slideToggle('slow');
            });
        });
    </script>
    <style>
        #flip {
            padding: 10px;
            text-align: center;
            background-color: #e5eecc;
            border: 1px solid red;
        }
        #panel {
            padding: 50px;
            text-align: center;
            background-color:yellow;
            border: solid 1px green;
              display: none;
        }
    </style>
</head>
<body>
    <div id='flip'>Click to slide up and down panel</div>
    <div id='panel'>This is slide up panel <br/><br/><br/>
        <img src='oops.png' width='200px' height='200px'/>
    </div>
</body>
</html>
Output:
Why are use the slideToggle() in Jquery, expain with example>