How to check using jQuery if an element is display none or block

jquery css

← PrevNext →

Tools you can use

You can use the .css() function in jQuery to check if an element or a group of elements have display 'none' or 'block' property.

Here's an example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
    <style>
      p { 
        display: inline-block;
        padding: 10px;
        width: auto;
      }
      p:nth-child(2) { display: none; }
    </style>
</head>

<body>
  <div>
    <p> alpha </p>
    <p> bravo </p>      <!--this element is display: none-->
    <p> charlie </p>    
    <p> delta </p>
    <p> echo </p>
  </div>

  <div>
    <input type='button' value='Click it' id="bt">
  </div>
</body>

<script>
  $('#bt').click(function () {
    check_if_hidden()
  });
  let check_if_hidden = () => {
    $('p').each(function () {      // check if elment is display none.
      if ($(this).css('display') == 'none')  {
        $(this).fadeIn('slow').css('display', 'inline-block');
      }
    });
  }
</script>
</html>
Try it

Remember, when an element's display property is set as "none", the element will not take up any space.

Also read... How to change CSS display to none or block using jQuery.

Happy coding. 🙂

← PreviousNext →