How to use slideDown (or show) function?

In this tutorial, we'll discuss about the slideDown() method in jQuery.
Submitted by Pratishtha Saxena, on August 12, 2022

jQuery slideDown() Method

This is an inbuilt jQuery method. As the name suggests, it slides down the content or the element that has been specified. If the particular element is hidden then it makes it visible.

Syntax:

$(selector).slideDown();

Here, the selector is the HTML DOM element that has been selected to slide down when the function is triggered. It has to be kept in mind that the slideDown() method only works when the element is hidden and has a display:none.

This method also takes speed as it's one of the parameters. The speed here can be slow or fast. The method that works opposite to slideDown() is slideUp(), which is the same as the previous but slides up the specified content.

Let's see an example for a better understanding.

Code to demonstrate the use of jQuery slideDown (or show) function

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div id="togglethis">Click Here</div>
    <div id="content">This is the content and it needs to be hidden.</div>
  </body>
</html>

CSS:

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #togglethis{
        padding: 10px;
        width: 100%;
        background: #eee;
        border: 1px solid black;
        text-align: center
    }

    #content{
        padding: 15px;
        width: 100%;
        text-align: center;
        font-size: 20px;
        display: none;
        background-color: grey;
    }

</style>

jQuery:

$(function() {
    $('#togglethis').click(function() {
        $('#content').slideDown();
    });
});

Output: