How to Use :Hidden Selector in jQuery With Code Example

:Hidden Selector in jQuery

AJAX interactions, event handling, animation, and HTML page traversal may all be made easier with the help of the robust and portable jQuery JavaScript library. “Write less, do more” is the goal of its primary features for developers. The fundamental idea behind jQuery is that it lets you pick components on a page and then use the simple syntax $(selector) to do something with them.action. The (selector) is used to query or locate HTML elements, the $ symbol is used to define or access jQuery, and action() is the function that is applied to the element or elements.

Understanding Its Syntax and Functionality

The :hidden selector, one of jQuery’s filtering selectors, quickly locates non-displayed elements on a page using CSS syntax. It functions similarly to the visible selector but in reverse.

Syntax:

Using the :hidden selector has the following simple syntax:

($(':hidden')

When a jQuery statement has this selector, it will return a list of all the elements that are now “hidden” in the document.

How It Works

There are various situations in which jQuery’s :hidden selector deems an element “hidden”:

Display: none CSS property: absent A hidden element has a computed show attribute style of zero. This hides and removes the element from document flow.

Zero width and height: This selector also takes into account elements that have both their height and width values set to 0 pixels.

Type=”hidden” input fields::hidden selector implicitly selects HTML elements that have this property. Usually, information that must be entered into a form but should not be seen to the user is stored in these fields.

Indirectly hidden by parent: When one of an element’s parent elements is hidden, even if the element itself doesn’t have a display, it might still be regarded as hidden indirectly: not in style.

When jQuery’s hidden() technique is used, matched items’ inline style property is display: none. The “smart” behaviour of jQuery’s hidden() and show() functions is key. Hide() by jQuery preserves the element’s initial display attribute (block, inline, inline-block). This is crucial because the show() method can return the element to its previous display state instead of a generic display: block, which could break the desired layout. Show() would preserve the design by returning a list item () element that was styled display: inline for a horizontal menu to inline instead of list-item.

Hidden elements affect page layout. Hidden elements disappear and operate as if they’re out of the page’s flow, raising any components underneath them. A “browser repaint” is what this is called.

Display and hide components are often used with jQuery’s animation. Animating hide() fades the element over time. To change the animation speed, use “slow,” “normal,” “fast,” or a millisecond (1000 for one second).SlideUp() and fadeOut() also hide animated objects.

To adjust an element’s visibility, jQuery provides toggle(), slideToggle(), and fadeToggle(). These methods show hidden elements and hide visible ones. Additionally, they can be used to animation speeds.

Code Example:

Using a real-world example, let’s demonstrate how the :hidden selector functions. We’ll begin with every element exposed, then conceal some, and then identify them with :hidden.

<!DOCTYPE html>
<html>
<head>
  <title>:hidden Selector Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .box {
      width: 100px;
      height: 50px;
      margin: 10px;
      float: left;
      text-align: center;
      line-height: 50px;
      border: 1px solid #000;
    }
    #box3 {
      display: none; /* hidden by CSS */
    }
  </style>
</head>
<body>
<h3>:hidden Selector Example</h3>
<div id="box1" class="box" style="background: lightblue;">Box 1</div>
<div id="box2" class="box" style="background: lightgreen;">Box 2</div>
<div id="box3" class="box" style="background: lightcoral;">Box 3</div>
<div style="clear: both;"></div>
<p id="status"></p>
<p id="hidden-list"></p>
<button id="hideBtn">Hide Box 1</button>
<button id="showBtn">Show All</button>
<script>
  $(function () {
    function updateStatus() {
      let hidden = $('div.box:hidden');
      $('#status').text('Hidden boxes: ' + hidden.length);
      let ids = hidden.map(function () {
        return '#' + this.id;
      }).get().join(', ');
      $('#hidden-list').text('IDs: ' + ids);
    }
    updateStatus();
    $('#hideBtn').click(function () {
      $('#box1').hide('slow', updateStatus);
    });
    $('#showBtn').click(function () {
      $('.box').show('slow', updateStatus);
    });
  });
</script>
</body>
</html>

Output:

:hidden Selector Example

Box 1    Box 2   Box 3
Hidden boxes: 0
IDs:
Hide Box 1    Show All

How this code works

Initial State: The website loads with Boxes 1 and 2 visible, but Box 3 is initially hidden by CSS (display: none;).

updateStatus() function: To choose every div element that is presently hidden on the page, this code uses $(‘div:hidden’). After that, it modifies the #status and #hidden-list paragraphs to display the number and IDs of these hidden components.

Initial Output: The first output The function updateStatus() is invoked on $(document).ready(). As you can see, box 3 has display: none, therefore it is counted and listed as a hidden element right away.

Hiding box1:$(‘#box1’).Clicking “Hide Box 1” uses hide(‘slow’). After gently animating box1’s height, width, and opacity to zero, this jQuery code sets its show attribute to none. UpdateStatus() is called again after animation.

Updated Output: The $(‘div:hidden’) selector will now identify and list both box1 (which was hidden using jQuery’s hide() method) and box3 (which was initially hidden by CSS). This shows that the selector correctly reflects the current visibility state of elements regardless of how they were hidden.

Showing all boxes: Clicking the “Show All Boxes” button causes $(‘.box’).show(‘slow’) to run. This will re-establish box 1 and box 3 through a gradual animation. Following the animation, the count of hidden elements will drop (or reach zero if no other elements are hidden) when updateStatus() is called.

Conclusion

In conclusion, the :hidden selector quickly and efficiently searches the DOM for hidden components. This can be done because of direct CSS style, zero dimensions, hidden input types, or inheriting a hidden state from a parent element. It makes it possible for dynamic and interactive web page experiences when used with jQuery’s potent manipulation techniques like hide() and show().

Page Content

Tutorials