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 div
s 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 id
s.
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.
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.