Change CSS display to none or block using jQuery

You can easily change CSS properties dynamically using the .css() method in jQuery. 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.

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 .css() method sets or returns the style property of an element. The method takes one parameter (or argument) when you want it to return a property value.

For example, the <div> element (in the above example) has the display property 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>
        <!--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>
    $('#bt').click(function () {
        $('div').css('display', 'block');       // change display property to "block".
    });
</script>
</html>

Try it

Change CSS to "none" and "block" (toggle show/hide)

<!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 "block" (visible)-->
        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>

👉 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.

← PreviousNext →