{"id":589,"date":"2017-03-16T14:38:36","date_gmt":"2017-03-16T14:38:36","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=589"},"modified":"2017-03-29T16:05:46","modified_gmt":"2017-03-29T10:35:46","slug":"how-check-element-hidden-jquery","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/how-check-element-hidden-jquery\/","title":{"rendered":"[Solved -10 Answers] How to check if an element is hidden in jQuery"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM<\/label><\/p>\n<ul>\n<li>It is possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()<\/li>\n<li>How would you test if an element is visible or hidden?<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>The Problem refers to a single element, You can use this code:<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%2F%2F%20Checks%20for%20display%3A%5Bnone%7Cblock%5D%2C%20ignores%20visible%3A%5Btrue%7Cfalse%5D%0A%0A%24(element).is(%22%3Avisible%22)%3B%20%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<ul>\n<li>If you change your selector to use jQuery considering you\u2019re using it in other places anyway:<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201dif(%24(\u2018%23testElement\u2019).is(\u2018%3Avisible\u2019))%20%0A%7B%0A%20%20%20%20%2F%2F%20Code%0A%7D%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><strong>Note:<\/strong><\/p>\n<ul>\n<li>If any one of a target element\u2019s parent elements are hidden, then .is(\u2018:visible\u2019) on the child will return false<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<p><strong>hidden selector:<\/strong><\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%2F%2F%20Matches%20all%20elements%20that%20are%20hidden%0A%24(\u2018element%3Ahidden\u2019)%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><strong>visible selector:<\/strong><\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%2F%2F%20Matches%20all%20elements%20that%20are%20visible%0A%24(\u2018element%3Avisible\u2019)%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>The Functions doesn\u2019t work with the visibility attribute.<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201dif%20(%20%24(element).css(\u2018display\u2019)%20%3D%3D%20\u2019none\u2019%20)%0A%7B%0A%20%20%20%20%2F%2F%20element%20is%20hidden%0A%7D%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<p><strong>Use the jQuery :visible Selector<\/strong><\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u2033 message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>To determine whether an element is collapsed or not by using the :<strong>visible<\/strong> and :<strong>hidden selectors.<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201dvar%20isVisible%20%3D%20%24(\u2018%23myDiv\u2019).is(\u2018%3Avisible\u2019)%3B%0Avar%20isHidden%20%3D%20%24(\u2018%23myDiv\u2019).is(\u2018%3Ahidden\u2019)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>you can just include :<strong>visible <\/strong>or :<strong>hidden in the selector<\/strong> expression<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(\u2018%23myDiv%3Avisible\u2019).animate(%7Bleft%3A%20\u2019%2B%3D200px\u2019%7D%2C%20\u2019slow\u2019)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<p>If you have a selector and you want to perform some action on it only if is visible or hidden, you can use <strong>filter(\u201c:visible\u201d) or filter(\u201c:hidden\u201d)<\/strong>.<\/p>\n<p><strong>if statement,<\/strong><\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201dif%20(%24(\u2018%23btnUpdate\u2019).is(%22%3Avisible%22))%0A%7B%0A%20%20%20%24(\u2018%23btnUpdate\u2019).animate(%7B%20width%3A%20%22toggle%22%20%7D)%3B%20%20%20%2F%2F%20Hide%20button%0A%7D%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><strong>Another way is more efficient:<\/strong><\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201dvar%20button%20%3D%20%24(\u2018%23btnUpdate\u2019)%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\u201d message=\u201djavascrpit code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><strong>You can do it all in one line:<\/strong><\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(\u2018%23btnUpdate\u2019).filter(%22%3Avisible%22).animate(%7B%20width%3A%20%22toggle%22%20%7D)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>In show() and hide() to make div hidden\/visible:<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201dif(%20%24(this).css(\u2018display\u2019)%20%3D%3D%20\u2019none\u2019%20)%0A%7B%0A%20%20%20%20%2F*%20your%20code%20goes%20here%20*%2F%0A%7D%20else%20%7B%0A%20%20%20%20%2F*%20alternate%20logic%20%20%20*%2F%0A%7D%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<p>You can use <strong>.is(\u2018:visible\u2019) <\/strong>to test if something is visible and <strong>.is(\u2018:hidden\u2019)<\/strong> to test for the opposite.<\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(\u2018%23offers\u2019).toggle(!%24(\u2018%23column-left%20form\u2019).is(\u2018%3Avisible\u2019))%3B%20%2F%2F%20or%3A%0A%24(\u2018%23offers\u2019).toggle(%24(\u2018%23column-left%20form\u2019).is(\u2018%3Ahidden\u2019))%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<p><strong>jQuery:<\/strong><\/p>\n<p>\u00a0<\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%24(\u2018%23column-left%20form\u2019).hide()%3B%0A%20%24(\u2018.show-search\u2019).click(function()%20%7B%0A%20%20%20%20%24(\u2018%23column-left%20form\u2019).stop(true%2C%20true).slideToggle(300)%3B%20%2F%2Fthis%20will%20slide%20but%20not%20hide%20that\u2019s%20why%0A%20%20%20%20%24(\u2018%23column-left%20form\u2019).hide()%3B%20%0A%20%20%20%20if(!(%24(\u2018%23column-left%20form\u2019).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(\u2018%23offers\u2019).hide()%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<p><strong>Using JavaScript:<\/strong><\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201dfunction%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\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><strong>Notes:<\/strong><\/p>\n<ul>\n<li>It works for nested elements<\/li>\n<li>It works for CSS and inline styles<\/li>\n<li>It doesn\u2019t require a framework<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM 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? SOLUTION 1: The Problem refers to a single element, You can use this code: [pastacode lang=\u201djavascript\u201d manual=\u201d%2F%2F%20Checks%20for%20display%3A%5Bnone%7Cblock%5D%2C%20ignores%20visible%3A%5Btrue%7Cfalse%5D%0A%0A%24(element).is(%22%3Avisible%22)%3B%20%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] [ad type=\u201dbanner\u201d] If you change [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[275,1208],"tags":[1150,1149,1152,1157,1151,1161,1125,1145,1144,1160,1127,1148,1156,1155,1154,1153,1147,1158,1159,1162,1146],"class_list":["post-589","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","tag-hidden-selector","tag-visible-selector","tag-check-if-an-element-is-hidden-using-jquery","tag-check-if-element-is-visible-javascript","tag-checking-if-an-element-is-visible-on-screen-using-jquery","tag-dom","tag-javascript","tag-javascript-detect-if-an-element-is-visible","tag-javascript-how-do-i-check-if-an-element-is-hidden-in-jquery","tag-javascript-check-if-element-is-visible-on-screen","tag-jquery","tag-jquery-basics-is-element-hidden-or-visible","tag-jquery-check-if-element-is-display-none","tag-jquery-check-if-element-is-in-viewport","tag-jquery-check-if-element-is-visible-on-screen","tag-jquery-if-is-visible","tag-jquery-if-statement-to-check-visibility","tag-jquery-is-not-visible","tag-jquery-set-visible","tag-visibility","tag-visibility-how-do-i-test-if-something-is-hidden-with-jquery"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=589"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/589\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}