How To Use SlideDown Method In JQuery With Example

Posted By Bajarangi soft , Posted On 13-10-2020

In jQuery slideDown() method is used to slide down an element.So today we discuss how to use slidedown method in jquery

How To Use SlideDown Method In JQuery With Example

Syntax:

$(selector).slideDown(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after the sliding completes.

The following example demonstrates the slideDown() method:

Step 1:Create index.html file and implement below code.

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

Step 2:Implement jquery to use SlideDown method.

<script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideDown("slow");
        });
    });
</script>

Complete Code For SlideDown Method In JQuery

<!DOCTYPE html>
<html>
<head>
    <title>How To Use SlideDown Method In JQuery With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: darkolivegreen;
    }
</style>
<style>
    #panel, #flip {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
    }

    #panel {
        padding: 50px;
        display: none;
    }
</style>
<body>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h2 id="color" style="color: White">SlideDown Method In JQuery</h2>
    </div>
    <br>
    <br>
    <div class="well">
        <div id="flip">Click to slide down panel</div>
        <div id="panel">Hello world!</div>
    </div>
</div>
</body>
</html>
<script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideDown("slow");
        });
    });
</script>

Related Post