Change CSS display to none or block using jQuery

jquery

← PrevNext →

Tools you can use

You can easily change CSS properties dynamically using jQuery .css() method. I have previously shared an article here explaining how to add CSS !important Style property using jQuery. Now, let’s see how we can change CSS display property to either none or block using jQuery.

👉 “This is for the beginners.”

Change CSS display to “none”

I have a <div> element, which by default, has the display property set to block. See the <style> section.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        div {
            display: block;
        }
    </style>
</head>
<body>
    <div> 
        Some content here inside DIV...
    </div>
    
    <p>
        <input type='button' value='Click to hide DIV' id='bt' />
    </p>
</body>
<script>
    $('#bt').click(function () {
        $('div').css('display', 'none');       change display property to none.
    });
</script>
</html>
Try it

In the above example, I am using the .css() method in my jQuery script to set the display property of the element to none.

The jQuery .css() method sets or returns the style property of an element. The method takes one parameter when you want it to return a property value. For example, the <div> element (in the above markup) has the display property to set to none. I can extract the property like this.

alert ($('div').css('display'));

Now, to set a CSS property to an element, you need to pass two parameters 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 same as 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>
        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>
    $('#bt').click(function () {
        $('div').css('display', 'block');       change display property to block.
    });
</script>
</html>
Try it

Change CSS to “none” and “block” (or just toggle show/hide)

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
<style>
    div {
        display: block;
    }
</style>
</head>

<body>
    <div> 
        Some content here inside DIV...
    </div>
    
    <p>
        <input type='button' value='Click to toggle' id='bt' />
    </p>
</body>
<script>
    $('#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>
Try it

Here, I am using Ternary Operator to toggle show/hide an element.

Using .show() and .hide() methods (alternate method)

In-addition, you can use the .show() and .hide() methods, and jQuery will change (or set) the property of the element for you. For example,
if the display property of the <div> element is none, you can use the .show() method to make the element visible:

<script>
    $('#bt').click(function () {
        $('div').show();
    });
</script>

and, if the display property of the <div> element is block, you can use the .hide() method.

<script>
    $('#bt').click(function () {
        $('div').hide();
    });
</script>

👉 If you are a beginner, then here’s another set of jQuery methods you don’t want to miss. Similar to the methods that I have shared in this article, but useful.

Well, that’s it. Thanks for reading ☺.

← PreviousNext →