ℹ️ Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 0.4 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://www.pietschsoft.com/post/2015/09/24/javascript-basics-is-element-hidden-or-visible |
| Last Crawled | 2026-03-31 23:36:12 (12 days ago) |
| First Indexed | 2024-05-15 14:29:11 (1 year ago) |
| HTTP Status Code | 200 |
| Meta Title | jQuery Basics: Is Element Hidden or Visible? | Chris Pietschmann |
| Meta Description | I am a solution architect, developer, SRE, trainer, author, and more. With 25 years of experience in the Software Development industry that includes working as a Consultant and Trainer in a wide array of different industries. |
| Meta Canonical | null |
| Boilerpipe Text | A very common code snippet that’s used a lot in various applications is the ability to detect if a specific element in the page is hidden or visible. jQuery provides some very useful functionality that allows for this to be easily determined; as well as making it easy to toggle the visibility of HTML elements on the page.
Detect if Element is Visible
Using a bit of CSS and the jQuery “.is” method makes it very easy to determine if the HTML element in the jQuery selector is either hidden or visible.
// jQuery selector to get an element
var
query
=
$
(
'
#elementId
'
);
// check if element is Visible
var
isVisible
=
query
.
is
(
'
:visible
'
);
if
(
isVisible
===
true
)
{
// element is Visible
}
else
{
// element is Hidden
}
What is jQuery “.is” method?
The jQuery “.is” method will check the current set of elements of the selector (see the ‘query’ variable in above code sample) against the specified CSS selector passed to the “.is” method. This method does not create a new jQuery object, but rather allows for the contents of a jQuery object to be tested without any modifications.
Full Documentation:
http://api.jquery.com/is/
What is the “:visible” selector?
The “:visible” selector will match an elements that are essentially Visible to the user within the page. This is determined by inspecting the elements to determine if they are taking up any visible space on the page; that is having a height or width greater than zero on the page.
Helpful Hint: If the CSS “display: none” is applied to the element, then “:visible” will evaluate to False.
Full Documentation:
https://api.jquery.com/visible-selector/
Toggle Element Visibility
On a related note, toggling element visibility can be done using the “.hide()” and “.show()” jQuery methods.
// jQuery selector to get element(s)
var
query
=
$
(
'
div.className
'
);
// Hide all matching elements
query
.
hide
();
// Display all matching elements
query
.
show
(); |
| Markdown | [ Chris Pietschmann](https://www.pietschsoft.com/)
- [Experience](https://www.pietschsoft.com/#experience)
- [Writing](https://www.pietschsoft.com/#writing)
- [Courses](https://www.pietschsoft.com/#courses)
- [Books](https://www.pietschsoft.com/#books)
- [Open Source](https://www.pietschsoft.com/#opensource)
- [Blog](https://www.pietschsoft.com/blog)
[Javascript](https://www.pietschsoft.com/blog#Javascript)
# jQuery Basics: Is Element Hidden or Visible?
By **Chris Pietschmann** • September 24, 2015 • 2 min read
A very common code snippet that’s used a lot in various applications is the ability to detect if a specific element in the page is hidden or visible. jQuery provides some very useful functionality that allows for this to be easily determined; as well as making it easy to toggle the visibility of HTML elements on the page.
## Detect if Element is Visible
Using a bit of CSS and the jQuery “.is” method makes it very easy to determine if the HTML element in the jQuery selector is either hidden or visible.
```
// jQuery selector to get an element
var query = $('#elementId');
// check if element is Visible
var isVisible = query.is(':visible');
if (isVisible === true) {
// element is Visible
} else {
// element is Hidden
}
```
## What is jQuery “.is” method?
The jQuery “.is” method will check the current set of elements of the selector (see the ‘query’ variable in above code sample) against the specified CSS selector passed to the “.is” method. This method does not create a new jQuery object, but rather allows for the contents of a jQuery object to be tested without any modifications.
Full Documentation: <http://api.jquery.com/is/>
## What is the “:visible” selector?
The “:visible” selector will match an elements that are essentially Visible to the user within the page. This is determined by inspecting the elements to determine if they are taking up any visible space on the page; that is having a height or width greater than zero on the page.
Helpful Hint: If the CSS “display: none” is applied to the element, then “:visible” will evaluate to False.
Full Documentation: <https://api.jquery.com/visible-selector/>
[](https://members.build5nines.com/ "Join the Build5Nines Membership")
## Toggle Element Visibility
On a related note, toggling element visibility can be done using the “.hide()” and “.show()” jQuery methods.
```
// jQuery selector to get element(s)
var query = $('div.className');
// Hide all matching elements
query.hide();
// Display all matching elements
query.show();
```
Chris Pietschmann
Microsoft MVP (Azure & Dev Tools) \| HashiCorp Ambassador \| IBM Champion \| MCT \| Developer \| Author
I am a solution architect, developer, SRE, trainer, author, and more. With 25 years of experience in the Software Development industry that includes working as a Consultant and Trainer in a wide array of different industries.
[Build5Nines](https://build5nines.com/) · [Powergenetic](https://powergenetic.ai/) · [LinkedIn Profile](http://linkedin.com/in/crpietschmann)
[](https://members.build5nines.com/ "Join the Build5Nines Membership")
Get practical Microsoft Azure, Terraform, DevOps, & AI guidance in your inbox
Join 10K+ readers of the Build5Nines Newsletter and get Chris's best insights, tutorials, and industry updates
#### Recent Posts
- ###### [Stop Learning. Create Your Way to Success.](https://www.pietschsoft.com/post/2026/03/15/stop-learning-create-your-way-to-success)
15 Mar 2026
- ###### [AI Isn't the Thing. It Gets You to the Thing.](https://www.pietschsoft.com/post/2026/03/14/ai-isnt-the-thing-it-gets-you-to-the-thing)
14 Mar 2026
- ###### [Pets, Cattle, and the “Should We Build This?” Trap (Even When AI Makes Building Easy)](https://www.pietschsoft.com/post/2026/01/17/pets-cattle-should-we-build-this)
17 Jan 2026
- ###### [How to Convert a String to an Enum and back in C\#](https://www.pietschsoft.com/post/2026/01/17/how-to-convert-string-to-enum-and-back-in-csharp)
17 Jan 2026
- ###### [Why Blogs Are Still Relevant Today for Developers and IT Pros](https://www.pietschsoft.com/post/2025/12/16/why-blogs-are-still-relevant-today)
16 Dec 2025
#### Recent on Build5Nines.com
[](https://build5nines.com/stop-hard-coding-local-ip-in-terraform-lock-down-firewalls-dynamically/)
##### [Stop Hard-Coding “Local IP in Terraform: Lock Down Firewalls Dynamically](https://build5nines.com/stop-hard-coding-local-ip-in-terraform-lock-down-firewalls-dynamically/)
###### Mar 9, 2026
[](https://build5nines.com/implementing-azure-naming-conventions-at-scale-with-terraform-and-build5nines-naming-azure-azurerm-region-pairs/)
##### [Implementing Azure Naming Conventions at Scale with Terraform and Build5Nines/naming/azure (AzureRM + Region Pairs)](https://build5nines.com/implementing-azure-naming-conventions-at-scale-with-terraform-and-build5nines-naming-azure-azurerm-region-pairs/)
###### Dec 26, 2025
[](https://build5nines.com/new-book-build-and-deploy-apps-using-azure-developer-cli-written-by-chris-pietschmann/)
##### [New Book: Build and Deploy Apps using Azure Developer CLI by Chris Pietschmann](https://build5nines.com/new-book-build-and-deploy-apps-using-azure-developer-cli-written-by-chris-pietschmann/)
###### Dec 21, 2025
[](https://build5nines.com/prompt-noise-is-killing-your-ai-accuracy-how-to-optimize-context-for-grounded-output/)
##### [Prompt Noise Is Killing Your AI Accuracy: How to Optimize Context for Grounded Output](https://build5nines.com/prompt-noise-is-killing-your-ai-accuracy-how-to-optimize-context-for-grounded-output/)
###### Dec 15, 2025
[](https://build5nines.com/unlock-github-copilots-full-potential-why-every-repo-needs-an-agents-md-file/)
##### [Unlock GitHub Copilots Full Potential: Why Every Repo Needs an AGENTS.md File](https://build5nines.com/unlock-github-copilots-full-potential-why-every-repo-needs-an-agents-md-file/)
###### Dec 3, 2025
[Back to top](https://www.pietschsoft.com/post/2015/09/24/javascript-basics-is-element-hidden-or-visible#top)
© 2003-2026 Chris Pietschmann
[Experience](https://www.pietschsoft.com/#experience) [Writing](https://www.pietschsoft.com/#writing) [Courses](https://www.pietschsoft.com/#courses) [Books](https://www.pietschsoft.com/#books) [Open Source](https://www.pietschsoft.com/#opensource) [Blog](https://www.pietschsoft.com/blog) [Contact](https://build5nines.com/contact) |
| Readable Markdown | A very common code snippet that’s used a lot in various applications is the ability to detect if a specific element in the page is hidden or visible. jQuery provides some very useful functionality that allows for this to be easily determined; as well as making it easy to toggle the visibility of HTML elements on the page.
## Detect if Element is Visible
Using a bit of CSS and the jQuery “.is” method makes it very easy to determine if the HTML element in the jQuery selector is either hidden or visible.
```
// jQuery selector to get an element
var query = $('#elementId');
// check if element is Visible
var isVisible = query.is(':visible');
if (isVisible === true) {
// element is Visible
} else {
// element is Hidden
}
```
## What is jQuery “.is” method?
The jQuery “.is” method will check the current set of elements of the selector (see the ‘query’ variable in above code sample) against the specified CSS selector passed to the “.is” method. This method does not create a new jQuery object, but rather allows for the contents of a jQuery object to be tested without any modifications.
Full Documentation: <http://api.jquery.com/is/>
## What is the “:visible” selector?
The “:visible” selector will match an elements that are essentially Visible to the user within the page. This is determined by inspecting the elements to determine if they are taking up any visible space on the page; that is having a height or width greater than zero on the page.
Helpful Hint: If the CSS “display: none” is applied to the element, then “:visible” will evaluate to False.
Full Documentation: <https://api.jquery.com/visible-selector/>
[](https://members.build5nines.com/ "Join the Build5Nines Membership")
## Toggle Element Visibility
On a related note, toggling element visibility can be done using the “.hide()” and “.show()” jQuery methods.
```
// jQuery selector to get element(s)
var query = $('div.className');
// Hide all matching elements
query.hide();
// Display all matching elements
query.show();
``` |
| Shard | 46 (laksa) |
| Root Hash | 8577930743393719046 |
| Unparsed URL | com,pietschsoft!www,/post/2015/09/24/javascript-basics-is-element-hidden-or-visible s443 |