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

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.

← PreviousNext →