- It is possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()
- How would you test if an element is visible or hidden?
- The Problem refers to a single element, You can use this code:
- If you change your selector to use jQuery considering you’re using it in other places anyway:
Note:
- If any one of a target element’s parent elements are hidden, then .is(‘:visible’) on the child will return false
hidden selector:
[pastacode lang=”javascript” manual=”%2F%2F%20Matches%20all%20elements%20that%20are%20hidden%0A%24(‘element%3Ahidden’)%0A” message=”javascript code” highlight=”” provider=”manual”/]visible selector:
[pastacode lang=”javascript” manual=”%2F%2F%20Matches%20all%20elements%20that%20are%20visible%0A%24(‘element%3Avisible’)%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]- The Functions doesn’t work with the visibility attribute.
Use the jQuery :visible Selector
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Ctitle%3Ewikitechy%3A%20jQuery%20Test%20If%20an%20Element%20is%20Visible%20on%20a%20Page%3C%2Ftitle%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%24(document).ready(function()%7B%0A%20%20%20%20%20%20%20%20%24(%22button%22).click(function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20show%20hide%20paragraph%20on%20button%20click%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22p%22).toggle(%22slow%22%2C%20function()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20check%20paragraph%20once%20toggle%20effect%20is%20completed%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(%24(%22p%22).is(%22%3Avisible%22))%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22The%20paragraph%20%20is%20visible.%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22The%20paragraph%20%20is%20hidden.%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%20%20%3Cbutton%20type%3D%22button%22%3EToggle%20Paragraph%20Display%3C%2Fbutton%3E%0A%20%20%20%20%3Cp%20style%3D%22display%3A%20none%3B%22%3ELearn%20to%20code%20in%20wikitechy%20Tutorial.%3C%2Fp%3E%0A%3C%2Fbody%3E%20%0A%3C%2Fhtml%3E%20%20%20%20%20%20%20%20%20%20%20%20″ message=”html code” highlight=”” provider=”manual”/]- To determine whether an element is collapsed or not by using the :visible and :hidden selectors.
- you can just include :visible or :hidden in the selector expression
If you have a selector and you want to perform some action on it only if is visible or hidden, you can use filter(“:visible”) or filter(“:hidden”).
if statement,
[pastacode lang=”javascript” manual=”if%20(%24(‘%23btnUpdate’).is(%22%3Avisible%22))%0A%7B%0A%20%20%20%24(‘%23btnUpdate’).animate(%7B%20width%3A%20%22toggle%22%20%7D)%3B%20%20%20%2F%2F%20Hide%20button%0A%7D%0A” message=”javascript code” highlight=”” provider=”manual”/]Another way is more efficient:
[pastacode lang=”javascript” manual=”var%20button%20%3D%20%24(‘%23btnUpdate’)%3B%0Aif%20(button.is(%22%3Avisible%22))%0A%7B%0A%20%20%20%20%20button.animate(%7B%20width%3A%20%22toggle%22%20%7D)%3B%20%20%20%2F%2F%20Hide%20button%0A%7D%0A” message=”javascrpit code” highlight=”” provider=”manual”/]You can do it all in one line:
[pastacode lang=”javascript” manual=”%24(‘%23btnUpdate’).filter(%22%3Avisible%22).animate(%7B%20width%3A%20%22toggle%22%20%7D)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]- In show() and hide() to make div hidden/visible:
You can use .is(‘:visible’) to test if something is visible and .is(‘:hidden’) to test for the opposite.
[pastacode lang=”javascript” manual=”%24(‘%23offers’).toggle(!%24(‘%23column-left%20form’).is(‘%3Avisible’))%3B%20%2F%2F%20or%3A%0A%24(‘%23offers’).toggle(%24(‘%23column-left%20form’).is(‘%3Ahidden’))%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]jQuery:
[pastacode lang=”javascript” manual=”%24(‘%23column-left%20form’).hide()%3B%0A%20%24(‘.show-search’).click(function()%20%7B%0A%20%20%20%20%24(‘%23column-left%20form’).stop(true%2C%20true).slideToggle(300)%3B%20%2F%2Fthis%20will%20slide%20but%20not%20hide%20that’s%20why%0A%20%20%20%20%24(‘%23column-left%20form’).hide()%3B%20%0A%20%20%20%20if(!(%24(‘%23column-left%20form’).is(%22%3Avisible%22)))%20%7B%0A%20%20%20%20%20%20%20%20%24(%22%23offers%22).show()%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%24(‘%23offers’).hide()%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/]
Using JavaScript:
[pastacode lang=”javascript” manual=”function%20isRendered(domObj)%0A%7B%0A%20%20%20%20if%20((domObj.nodeType%20!%3D%201)%20%7C%7C%20(domObj%20%3D%3D%20document.body))%20%0A%7B%0A%20%20%20%20%20%20%20%20return%20true%3B%0A%20%7D%0A%20%20%20%20if%20(domObj.currentStyle%20%26%26%20domObj.currentStyle%5B%22display%22%5D%20!%3D%20%22none%22%20%26%26%20domObj.currentStyle%5B%22visibility%22%5D%20!%3D%20%22hidden%22)%20%0A%7B%0A%20%20%20%20%20%20%20%20return%20isRendered(domObj.parentNode)%3B%0A%20%7D%20else%20if%20(window.getComputedStyle)%20%0A%7B%0A%20%20%20%20%20%20%20%20var%20cs%20%3D%20document.defaultView.getComputedStyle(domObj%2C%20null)%3B%0A%20%20%20%20%20%20%20%20if%20(cs.getPropertyValue(%22display%22)%20!%3D%20%22none%22%20%26%26%20cs.getPropertyValue(%22visibility%22)%20!%3D%20%22hidden%22)%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20isRendered(domObj.parentNode)%3B%0A%7D%0A%7D%0A%20%20%20%20return%20false%3B%0A%7D%0A” message=”javascript code” highlight=”” provider=”manual”/]Notes:
- It works for nested elements
- It works for CSS and inline styles
- It doesn’t require a framework