jQuery :visible Selector Examples

In jQuery, Tips and Tricks by March 25th, 2013

394 Views

If you wish to check whether an element in a web page is visible or hidden, you can easily achieve it using the jQuery visible selector. In this article, I am going to share easy examples that show how to use the visible selector in making a div visible / hidden, check if element is visible or not, set visible, toggle visibility, etc. Read on to find out more.

How to use the jQuery visible Selector

In order to see the usage of the :visible selector, assume that we have few elements in a web page such as a div, an image, etc. Let’s see how the visibility works and can be manipulated in real time. Check out the examples below.

Common HTML source code for all the following examples

Example 1: Check if div is visible or not visible (hidden)

Example 2: Toggle div visibility i.e Make a visible div hidden and vice versa

Example 3: Manually set visibility to an element, such as an image, div, etc.

Example 4: Select visible elements only for list items of unordered  i.e. if element is visible, then alert its (the visible list item) ID

Example 5: Check element visibility using the .is() method

Example 6: If element is not visible then create a new element

Simple, isn’t it?

Do you know of any other ways to use the jQuery visible selector? Feel free to suggest by commenting below.