Last Updated: 17th September 2025
jQuery makes it easy to dynamically modify CSS properties, including the display attribute, which controls whether an element is visible or hidden on the page.In this tutorial, you'll learn how to toggle an element's visibility by setting its "display" property to "none" or "block" using jQuery. We'll also explore better alternatives like .hide(), .show(), and .toggle(), methods that are more semantic and handle layout nuances more gracefully than manually setting display values.
Change CSS display to 'none'
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>Some content here inside DIV...</div>
<p><input type='button' value='Click to hide DIV' id='bt' /></p>
</body>
<script>
$(document).ready(function() {
$('#bt').click(function () {
$('div').css('display', 'none'); // change display property to none.
});
});
</script>
</html>In the example above, I use jQuery's .css() method to dynamically set the element's display property to "none", effectively hiding it from view.
The .css() method allows you to get or set CSS properties of selected elements. When called with a single argument, like .css('display'), it returns the current value of that property. To modify a style, you pass two arguments: the property name and its new value, as in .css('display', 'none').
For example, the <div> element (in the above example) has the display property set to none. I can extract its property like this,
alert ($('div').css('display'));
Now, to set a CSS property to an element, you need to pass two arguments to the .css() method, like this (as shown in the above code).
$('div').css('display', 'none');
Note: You can set a new "background" or "add padding" to the element etc. dynamically using the .css() method.
Change CSS display to 'block'
It is almost similar like the above example. However, there is a slight change in the <style> section and the parameters inside the .css() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/* The display property if DIV is "none"*/
div {
display: none;
}
</style>
</head>
<body>
<div>Some content here inside DIV...</div>
<p><input type='button' value='Click to show DIV' id='bt' /></p>
</body>
<script>
$(document).ready(function() {
$('#bt').click(function () {
$('div').css('display', 'block'); // change display property to "block".
});
});
</script>
</html>Change CSS to 'none' and 'block' (toggle show/hide)
Here, I am using Ternary Operator to toggle show/hide an element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>Some content here inside DIV...</div>
<p><input type='button' value='Click to toggle' id='bt' /></p>
</body>
<script>
$(document).ready(function() {
$('#bt').click(function () {
// Using ternary operator to toggle CSs display property to block or none.
$('div').css('display') == 'block' ?
$('div').css('display', 'none') :
$('div').css('display', 'block');
});
});
</script>
</html>💡 Now, let's explore improved examples that follow jQuery best practices. Instead of hardcoding display: block (I have explained "why" later in the post), these approaches use semantic jQuery methods like .show(), .hide(), and .toggle() to manage visibility more reliably and cleanly.
Using jQuery .toggle() Method
The .toggle() method in jQuery is a cleaner, more reliable way to switch an element's visibility compared to manually using a ternary operator with .css('display', ...), as I have shown in the previous (above) example.
<body>
<div>Some content here inside DIV...</div>
<p><input type='button' value='Click to show/hide DIV' id='bt' /></p>
</body>
<script>
$(document).ready(function () {
$('#bt').click(function () {
$('div').toggle();
});
});
</script>Now, let me example why this example is better than the previous example.
🚀 The ternary operator example (explained above) assumes the element is either display: block or none, which is risky. If the element was originally inline, flex, or something else, forcing block could break the layout.
The .toggle() method automatically checks if an element is visible. If the element is visible, hides the element. If the element is hidden, it shows the element.
It handles the display property internally and restores the original value when showing the element again.
Using jQuery .show() and .hide() Methods
Additionally, jQuery provides the .show() and .hide() methods as convenient alternatives to manually setting the display property. These methods automatically adjust the element's visibility without requiring you to specify "display: block" or "none".
For instance, if a <div> element is currently hidden (display: none), calling .show() will make it visible by restoring its original display value.
<script>
$(document).ready(function () {
$('#bt').click(function () {
$('div').show();
});
});
</script>Similarly, .hide() will conceal the element by setting its display to none.
<script>
$('#bt').click(function () {
$('div').hide();
});
</script>Using .is(':visible') Method in jQuery
jQuery .is(':visible') method is another way to check an element's visibility before deciding whether to show or hide it. It gives you more control than .toggle() when you need conditional logic or want to trigger other actions based on visibility.
<body>
<div>Some content here inside DIV...</div>
<p><input type='button' value='Click to show/hide DIV' id='bt' /></p>
</body>
<script>
$(document).ready(function() {
$('#bt').click(function () {
$('div').is(':visible') ? $('div').hide() : $('div').show();
console.log($('div').css('display')); // check the element's display property.
});
});
</script>One advantage using .is(':visible') is that you add animation effects like .fadeIn() and .fadeOut() to toggle an element's visibility.
<script>
$(document).ready(function() {
$('#bt').click(function () {
if ($('div').is(':visible')) {
$('div').fadeOut();
}
else {
$('div').fadeIn();
}
});
});
</script>