{"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=&#8221;javascript&#8221; manual=&#8221;%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&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<ul>\n<li>If you change your selector to use jQuery considering you&#8217;re using it in other places anyway:<\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;if(%24(&#8216;%23testElement&#8217;).is(&#8216;%3Avisible&#8217;))%20%0A%7B%0A%20%20%20%20%2F%2F%20Code%0A%7D%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><strong>Note:<\/strong><\/p>\n<ul>\n<li>If any one of a target element&#8217;s parent elements are hidden, then .is(&#8216;:visible&#8217;) 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=&#8221;javascript&#8221; manual=&#8221;%2F%2F%20Matches%20all%20elements%20that%20are%20hidden%0A%24(&#8216;element%3Ahidden&#8217;)%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><strong>visible selector:<\/strong><\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%2F%2F%20Matches%20all%20elements%20that%20are%20visible%0A%24(&#8216;element%3Avisible&#8217;)%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>The Functions doesn&#8217;t work with the visibility attribute.<\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;if%20(%20%24(element).css(&#8216;display&#8217;)%20%3D%3D%20&#8217;none&#8217;%20)%0A%7B%0A%20%20%20%20%2F%2F%20element%20is%20hidden%0A%7D%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<p><strong>Use the jQuery :visible Selector<\/strong><\/p>\n[pastacode lang=&#8221;markup&#8221; manual=&#8221;%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&#8243; message=&#8221;html code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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=&#8221;javascript&#8221; manual=&#8221;var%20isVisible%20%3D%20%24(&#8216;%23myDiv&#8217;).is(&#8216;%3Avisible&#8217;)%3B%0Avar%20isHidden%20%3D%20%24(&#8216;%23myDiv&#8217;).is(&#8216;%3Ahidden&#8217;)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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=&#8221;javascript&#8221; manual=&#8221;%24(&#8216;%23myDiv%3Avisible&#8217;).animate(%7Bleft%3A%20&#8217;%2B%3D200px&#8217;%7D%2C%20&#8217;slow&#8217;)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\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(&#8220;:visible&#8221;) or filter(&#8220;:hidden&#8221;)<\/strong>.<\/p>\n<p><strong>if statement,<\/strong><\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;if%20(%24(&#8216;%23btnUpdate&#8217;).is(%22%3Avisible%22))%0A%7B%0A%20%20%20%24(&#8216;%23btnUpdate&#8217;).animate(%7B%20width%3A%20%22toggle%22%20%7D)%3B%20%20%20%2F%2F%20Hide%20button%0A%7D%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><strong>Another way is more efficient:<\/strong><\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;var%20button%20%3D%20%24(&#8216;%23btnUpdate&#8217;)%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&#8221; message=&#8221;javascrpit code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><strong>You can do it all in one line:<\/strong><\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(&#8216;%23btnUpdate&#8217;).filter(%22%3Avisible%22).animate(%7B%20width%3A%20%22toggle%22%20%7D)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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=&#8221;javascript&#8221; manual=&#8221;if(%20%24(this).css(&#8216;display&#8217;)%20%3D%3D%20&#8217;none&#8217;%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&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<p>You can use <strong>.is(&#8216;:visible&#8217;) <\/strong>to test if something is visible and <strong>.is(&#8216;:hidden&#8217;)<\/strong> to test for the opposite.<\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(&#8216;%23offers&#8217;).toggle(!%24(&#8216;%23column-left%20form&#8217;).is(&#8216;%3Avisible&#8217;))%3B%20%2F%2F%20or%3A%0A%24(&#8216;%23offers&#8217;).toggle(%24(&#8216;%23column-left%20form&#8217;).is(&#8216;%3Ahidden&#8217;))%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<p><strong>jQuery:<\/strong><\/p>\n<p>&nbsp;<\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(&#8216;%23column-left%20form&#8217;).hide()%3B%0A%20%24(&#8216;.show-search&#8217;).click(function()%20%7B%0A%20%20%20%20%24(&#8216;%23column-left%20form&#8217;).stop(true%2C%20true).slideToggle(300)%3B%20%2F%2Fthis%20will%20slide%20but%20not%20hide%20that&#8217;s%20why%0A%20%20%20%20%24(&#8216;%23column-left%20form&#8217;).hide()%3B%20%0A%20%20%20%20if(!(%24(&#8216;%23column-left%20form&#8217;).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(&#8216;%23offers&#8217;).hide()%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<p><strong>Using JavaScript:<\/strong><\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;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&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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&#8217;t 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=&#8221;javascript&#8221; manual=&#8221;%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&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/] [ad type=&#8221;banner&#8221;] 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}]}}