{"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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">\/\/ Checks for display:[none|block], ignores visible:[true|false]<br\/><br\/>$(element).is(&quot;:visible&quot;); <\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if($(&#039;#testElement&#039;).is(&#039;:visible&#039;)) <br\/>{<br\/>    \/\/ Code<br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">\/\/ Matches all elements that are hidden<br\/>$(&#039;element:hidden&#039;)<\/code><\/pre> <\/div>\n<p><strong>visible selector:<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">\/\/ Matches all elements that are visible<br\/>$(&#039;element:visible&#039;)<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if ( $(element).css(&#039;display&#039;) == &#039;none&#039; )<br\/>{<br\/>    \/\/ element is hidden<br\/>}<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<p><strong>Use the jQuery :visible Selector<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;!DOCTYPE html&gt;<br\/>&lt;html&gt;<br\/>&lt;head&gt;<br\/>&lt;title&gt;wikitechy: jQuery Test If an Element is Visible on a Page&lt;\/title&gt;<br\/>&lt;script type=&quot;text\/javascript&quot; src=&quot;http:\/\/code.jquery.com\/jquery.min.js&quot;&gt;&lt;\/script&gt;<br\/>&lt;script type=&quot;text\/javascript&quot;&gt;<br\/>    $(document).ready(function(){<br\/>        $(&quot;button&quot;).click(function(){<br\/>            \/\/ show hide paragraph on button click<br\/>            $(&quot;p&quot;).toggle(&quot;slow&quot;, function(){<br\/>                \/\/ check paragraph once toggle effect is completed<br\/>                if($(&quot;p&quot;).is(&quot;:visible&quot;)){<br\/>                    alert(&quot;The paragraph  is visible.&quot;);<br\/>                } else{<br\/>                    alert(&quot;The paragraph  is hidden.&quot;);<br\/>                }<br\/>            });<br\/>        });<br\/>    });<br\/>&lt;\/script&gt;<br\/>&lt;\/head&gt;<br\/>&lt;body&gt;<br\/>    &lt;button type=&quot;button&quot;&gt;Toggle Paragraph Display&lt;\/button&gt;<br\/>    &lt;p style=&quot;display: none;&quot;&gt;Learn to code in wikitechy Tutorial.&lt;\/p&gt;<br\/>&lt;\/body&gt; <br\/>&lt;\/html&gt;            <\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">var isVisible = $(&#039;#myDiv&#039;).is(&#039;:visible&#039;);<br\/>var isHidden = $(&#039;#myDiv&#039;).is(&#039;:hidden&#039;);<\/code><\/pre> <\/div>\n<ul>\n<li>you can just include :<strong>visible <\/strong>or :<strong>hidden in the selector<\/strong> expression<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&#039;#myDiv:visible&#039;).animate({left: &#039;+=200px&#039;}, &#039;slow&#039;);<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if ($(&#039;#btnUpdate&#039;).is(&quot;:visible&quot;))<br\/>{<br\/>   $(&#039;#btnUpdate&#039;).animate({ width: &quot;toggle&quot; });   \/\/ Hide button<br\/>}<\/code><\/pre> <\/div>\n<p><strong>Another way is more efficient:<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascrpit code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">var button = $(&#039;#btnUpdate&#039;);<br\/>if (button.is(&quot;:visible&quot;))<br\/>{<br\/>     button.animate({ width: &quot;toggle&quot; });   \/\/ Hide button<br\/>}<\/code><\/pre> <\/div>\n<p><strong>You can do it all in one line:<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&#039;#btnUpdate&#039;).filter(&quot;:visible&quot;).animate({ width: &quot;toggle&quot; });<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">if( $(this).css(&#039;display&#039;) == &#039;none&#039; )<br\/>{<br\/>    \/* your code goes here *\/<br\/>} else {<br\/>    \/* alternate logic   *\/<br\/>}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&#039;#offers&#039;).toggle(!$(&#039;#column-left form&#039;).is(&#039;:visible&#039;)); \/\/ or:<br\/>$(&#039;#offers&#039;).toggle($(&#039;#column-left form&#039;).is(&#039;:hidden&#039;));<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<p><strong>jQuery:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">$(&#039;#column-left form&#039;).hide();<br\/> $(&#039;.show-search&#039;).click(function() {<br\/>    $(&#039;#column-left form&#039;).stop(true, true).slideToggle(300); \/\/this will slide but not hide that&#039;s why<br\/>    $(&#039;#column-left form&#039;).hide(); <br\/>    if(!($(&#039;#column-left form&#039;).is(&quot;:visible&quot;))) {<br\/>        $(&quot;#offers&quot;).show();<br\/>    } else {<br\/>        $(&#039;#offers&#039;).hide();<br\/>    }<br\/>  });<\/code><\/pre> <\/div>\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<p><strong>Using JavaScript:<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">javascript code<\/span> <\/div> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">function isRendered(domObj)<br\/>{<br\/>    if ((domObj.nodeType != 1) || (domObj == document.body)) <br\/>{<br\/>        return true;<br\/> }<br\/>    if (domObj.currentStyle &amp;&amp; domObj.currentStyle[&quot;display&quot;] != &quot;none&quot; &amp;&amp; domObj.currentStyle[&quot;visibility&quot;] != &quot;hidden&quot;) <br\/>{<br\/>        return isRendered(domObj.parentNode);<br\/> } else if (window.getComputedStyle) <br\/>{<br\/>        var cs = document.defaultView.getComputedStyle(domObj, null);<br\/>        if (cs.getPropertyValue(&quot;display&quot;) != &quot;none&quot; &amp;&amp; cs.getPropertyValue(&quot;visibility&quot;) != &quot;hidden&quot;) <br\/>{<br\/>            return isRendered(domObj.parentNode);<br\/>}<br\/>}<br\/>    return false;<br\/>}<\/code><\/pre> <\/div>\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: [ad type=&#8221;banner&#8221;] If you change your selector to use jQuery considering you&#8217;re [&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}]}}