How to use jQuery hide() Method? [SOLVED]

Table of Contents

Introduction to jQuery hide() Method

The jQuery hide() Method causes a display of none to an HTML element.

$(<selector>).hide()  
$(<selector>).hide(<duration>, <callback>)  
$(<selector>).hide(<duration>, <easing>, <callback>)

duration, easing, and callback are optional parameters.

duration: Control the effect's duration with parameters like fast, slow, or the (default value of 400) milliseconds.
easing: Apply the transition easing functions: swing (default) and linear.
callback: Call a function after completing the hide effect.

You can also achieve the same effect with jQuery functions like slideUp() and fadeOut().

Here is an example.

Lab environment setup

Create the project directory and cd into it. Next, create index.html, style.css, and main.js files in the directory, then open the project directory in a code editor.

mkdir jQueryHide && cd jQueryHide
touch index.html style.css main.js
code .

Now we can import jQuery before using its hide functions.

A practical example of jQuery hide Method

Let's create a div with three children.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
    <title>jQuery hide</title>
</head>
<body>
    <div class="container">
        <div class="box" id="first">First</div>
        <div class="box" id="second">Second</div>
        <div class="box" id="third">Third</div>
    </div>
</body>
</html>

In the head section, we import the minified jQuery version from the CDN and link the stylesheet and the script files.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>

In the body, we create three divs inside the main div with the container class. Each child div has a box class for general styling and an id for unique styling and jQuery grabbing.

ALSO READ: How to fill an Array in JavaScript? [SOLVED]

style.css

body {
    background: #212121;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    margin: auto;
    flex-direction: column;
}

.container {
    height: 50%;
    width: 50%;
}

.box {
    height: 25%;
    width: 25%;
    margin: .5rem;
    font-weight: bolder;
    color: rgb(46, 44, 44);
}

#first {
    background: mediumseagreen;
}
#second {
    background: green;
}
#third {
    background: greenyellow;
}


body, .container, .box {
    display: flex;
    justify-content: center;
    align-items: center;
}

The three boxes have a flex display. The first box is mediumseagreen; second box, green; and third box, greenyellow.

Now let's hide the boxes.

main.js

$(document).ready( () => {
    $("#first").hide()
    $("#second").slideUp()
    $("#third").fadeOut()
})

We wait for the DOM to load all contents, then grab the first, second, and third boxes with the respective ids.

Output

Before applying the hide functions, we have the three boxes with a flex display.

before jQuery hide

<div class="container">
    <div class="box" id="first">First</div>
    <div class="box" id="second">Second</div>
    <div class="box" id="third">Third</div>
</div>

after jQuery hide

The boxes disappear on reloading the page. We see a new style: display: none on inspecting the elements.

<div class="container">
    <div class="box" id="first" style="display: none;">First</div>
    <div class="box" id="second" style="display: none;">Second</div>
    <div class="box" id="third" style="display: none;">Third</div>
</div>

jQuery hide

We hide the first box using jQuery's hide() function.

$("#first").hide()

The function did what we would achieve with CSS display.

$('#first').css('display','none')

We could also use the function on an element hover or button click.

ALSO READ: How to call a function every second in JS [SOLVED]

jQuery's show() function redisplays the hidden element. Depending on the active effect, we can use the toggle() function to switch between hide and show states.

Let's include a button in the HTML file before using the toggle() function.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
    <title>jQuery hide</title>
</head>
<body>
    <div class="container">
        <div class="box" id="first">First</div>
        <div class="box" id="second">Second</div>
        <div class="box" id="third">Third</div>
    </div>
    <button>Hide/show first box</button>
</body>
</html>

main.js

$(document).ready( () => {
    // $("#first").hide("swing")
    // $("#second").slideUp()
    // $("#third").fadeOut()

    $('button').click( () => {
        $('#first').toggle("slow")
    })

})

The first box disappears or reappears on clicking the button.

Alternatives to jQuery hide function

The most typical alternatives to the hide() function are slideUp() and fadeOut(), which we used in the example.

jQuery slide up

We hid the second box using jQuery's slideUp() function.

$("#second").slideUp()

jQuery fade out

We hid the third box using jQuery's fadeOut() function.

$("#third").fadeOut()

Conclusion

The most straightforward way to change an element display to none is to use the jQuery hide function. Alternatively, you can deploy the slideUp(), fadeOut(), css(), and toggle() functions, as shown in this tutorial.