jQuery css() change css display property to none or block

Introduction

Use the jQuery css() method to change the CSS display property value to none or block.

The css() method apply style rules directly to the elements.

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Change CSS display Property to none or block</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
    #myDiv{/*  w w  w  .  j av  a2s .co m*/
        padding: 20px;
        background: #abb1b8;
        margin-top: 10px;
    }
</style>
<script>
$(document).ready(function(){
    // Set div display to none
    $(".hide-btn").click(function(){
        $("#myDiv").css("display", "none");
    });

    // Set div display to block
    $(".show-btn").click(function(){
        $("#myDiv").css("display", "block");
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Display none</button>
    <button type="button" class="show-btn">Display block</button>
    <div id="myDiv">#myDiv</div>
</body>
</html>

Previous Next