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


Written by - Steve Alila
Reviewed by - Deepak Prasad

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.

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> 

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

 

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>

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

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.

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")
    })

})

jQuery hide or show effect

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.

 

Views: 0

Steve Alila

He specializes in web design, WordPress development, and data analysis, with proficiency in Python, JavaScript, and data extraction tools. Additionally, he excels in web API development, AI integration, and data presentation using Matplotlib and Plotly. You can connect with him on LinkedIn or check his projects on GitHub page.

Can't find what you're searching for? Let us assist you.

Enter your query below, and we'll provide instant results tailored to your needs.

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can send mail to admin@golinuxcloud.com

Thank You for your support!!

Leave a Comment