Databases
StackOverflow2013
Postsdbo
POjQuery toggle doesn't work properly if no display property set initially
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery toggle doesn't work properly if no display property set initially
    text
    copied!<p>I'm using jQuery v1.8.3 and jQuery UI v1.9.2.</p> <p>On a <code>click</code> of a <code>button</code> I wish a menu (via a <code>ul</code>) to hide if it's open, or show if it's closed, so I chose to use the <a href="http://api.jquery.com/toggle/" rel="nofollow">toggle</a> function in it's most basic form, on <code>click</code>, <code>toggle()</code>. Simple as that, e.g.</p> <pre><code>button.click =&gt; autocomplete = input_field.data("ui-autocomplete") menu = autocomplete.menu ul = menu.element ul.toggle() </code></pre> <p>(it's coffeescript, but you get the gist)</p> <p>What actually happens is that when the <code>ul</code> is displayed at first (not via the button) it has <strike>display property set</strike> the display property set to <code>display: block</code>.</p> <p>Then, on first click of the button if I check within the click function what the current status of the display property is via:</p> <pre><code>console.log "display = #{ul.css('display')}" ul.toggle() console.log "display = #{ul.css('display')}" </code></pre> <p>the output is:</p> <blockquote> <p>display = none<br> display = block </p> </blockquote> <p>So for some reason the property is being incorrectly picked up initially.</p> <p><strike>it adds the display property as <code>display: block</code> and then on the next click sets <code>display: none</code>.</strike></p> <p>I'm not in control of the <code>ul</code> directly as it is rendered by the <a href="http://docs.jquery.com/UI/Autocomplete" rel="nofollow">autocomplete widget</a> and I'm not keen on having to fiddle about with that.</p> <p>Is this expected behaviour, and what is the best way to work around this? I'm thinking of passing a function to <code>click</code> that checks if there is a display attr set and then show or hide dependent on that, but if there's an easier way or better function, maybe a newer version of toggle, then please let me know. The jQuery docs are, in my view, some of the worst of any tech project so I consider it quite likely that I'm using the wrong function entirely.</p> <p>Any help is much appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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