Detect if an element is visible with jQuery

Learn, how to use jQuery to detect the visibility of an element in the HTML document?
Submitted by Pratishtha Saxena, on December 26, 2022

In jQuery, we have a predefined selector which will help us to make this task a lot easier. This is the jQuery :visible selector.

jQuery :visible Selector

The jQuery :visible selector allows you to select the elements that are visible in the document. The visible elements are said to be visible if they do not have display: none, or hidden parent element, or have their height–weight set to 0.

Therefore, this selector selects all those elements and let us perform further operations on them. This selector is a completed contradict of the :hidden selector in jQuery. The :hidden selector allows the selection of hidden elements whereas :visible selector selects all the visible elements of a particular type mentioned.

Syntax:

$('element : visible');

It is used along with the ':' symbol in front. The element name is provided to help select only those particular visible elements.

The example given below shows how the part of the list gets toggled between – the hidden and visible state. Hence, as the list is toggled by the user, the :visible selector gets triggered for the same and executes the function defined for it.

jQuery example detect if an element is visible

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>Detect if an element is visible with jQuery</h2>
    <h4>Click the button to check whether the list is visible or hidden.</h4>
    <button>Toggle Visibility</button>
    <hr>
    <table style="padding: 10px;">
      <tr>
        <td>
          <ul id="one">
            <li>January</li>
            <li>February</li>
            <li>March</li>
            <li>April</li>
            <li>May</li>
            <li>June</li>
          </ul>
        </td>
        <td>
          <ul id="two">
            <li>July</li>
            <li>August</li>
            <li>September</li>
            <li>October</li>
            <li>November</li>
            <li>December</li>
          </ul>
        </td>
      </tr>
    </table>
    <hr>
    <h4 id="one"></h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('ul#two').toggle(function(){
                if($(this).is(":visible")){
                $('h4#one').html('List is Visible !')
            }
            else{
                $('h4#one').html('List is Hidden !')
            };
            
            }); 
        });
    }); 
  </script>
</html>

Output:

Example: Detect if an element is visible with jQuery