Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery 1.7.1 hide and show not working correctly
    text
    copied!<p>I have an element that is initially hidden by an inline style display:none. On click of another element I want to show the hidden element, then on re-click I want to hide it again. But what happens is if I put anything in the else statement it wont show or hide but if I leave the else blank it will show the element. </p> <p>Also toggle(); and .is(:hidden) dont work either.</p> <p>jquery version is either jQuery v1.6.4 or jQuery v1.7.1 </p> <p>What’s going wrong?</p> <pre><code> //this does not work $('#cust_select').click(function(e) { var element = document.getElementById('cust_list'); if($('#cust_list').css('display') === 'none') { $('#cust_list').show(); } else if($('#cust_list').css('display') !== 'none'){ $('#cust_list').hide(); } //this will show the element $('#cust_select').click(function(e) { var element = document.getElementById('cust_list'); if($('#cust_list').css('display') === 'none') { $('#cust_list').show(); } else if($('#cust_list').css('display') !== 'none'){ //do nothing } }); </code></pre> <p>html:</p> <pre><code> &lt;ul id="selectLinkTop" class="clickMenu selectmenu SugarActionMenu" name=""&gt; &lt;li class="sugar_action_button"&gt; &lt;input id="checkallContacts" class="checkbox massall" type="checkbox" name="checkallContacts" style="float: left;margin: 2px 0 0 4px;" onclick=""&gt; &lt;ul id="cust_list" style="background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;box-shadow: 0 5px 10px #999999;float: left;left: 0;list-style: none outside none;margin: 0;overflow: hidden;padding: 8px 0;position: absolute;top: 18px;width: auto;z-index: 10;display: none;"&gt; &lt;li style="clear: both;margin: 0;padding: 0;white-space: nowrap;width: 100%;"&gt;&lt;a id="button_select_this_page_top" style="border: 0 none !important;float: left;font-size: 12px !important;padding: 1px 10px !important;text-align: left;width: 100%;line-height: 18px;display: block;" href="#"&gt;Select This Page&lt;/a&gt;&lt;/li&gt; &lt;li style="clear: both;margin: 0;padding: 0;white-space: nowrap;width: 100%;"&gt;&lt;a id="button_select_all_top" style="border: 0 none !important;float: left;font-size: 12px !important;padding: 1px 10px !important;text-align: left;width: 100%;line-height: 18px;display: block;" href="#" name="selectall"&gt;Select All‎&lt;/a&gt;&lt;/li&gt; &lt;li style="clear: both;margin: 0;padding: 0;white-space: nowrap;width: 100%;"&gt;&lt;a id="button_deselect_top" style="border: 0 none !important;float: left;font-size: 12px !important;padding: 1px 10px !important;text-align: left;width: 100%;line-height: 18px;display: block;" href="#" name="deselect"&gt;Deselect All&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;span id="cust_select" class="subhover"&gt; &lt;/span&gt; &lt;/li&gt; &lt;/ul&gt;' </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload