---
title: "Why are use the slideToggle() in Jquery, expain with example>"  
description: "Why are use the slideToggle() in Jquery, expain with example>"  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93798/why-are-use-the-slidetoggle-in-jquery-expain-with-example  
category: "web application"  
tags: ["web programming", "web application development", "web development"]  
reading_time: 2 minutes  

---

# Why are use the slideToggle() in Jquery, expain with example>

Why are use the slideToggle() in Jquery, expain with example>

## Answers

### Answer 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>](https://answers.mindstick.com/questionanswer/cad6ba30-d2fb-4c22-ba6e-3e821a1924d3/images/f0cfba9d-1f1e-4af8-9d9d-1d1ef469db08.png)\


---

Original Source: https://answers.mindstick.com/qa/93798/why-are-use-the-slidetoggle-in-jquery-expain-with-example

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
