Question

I have a div element containing a few other divs with an id of #popup_inner_wrapper.

When I use the JS console in chrome:

$('#popup_inner_wrapper').toggle("fast");

It hides the div, but then shows it again.

If I hide the div at page load with css, then toggle it from the console the div will show. If I then toggle again from the console it will hide and show again in one action.

What could be causing this behavior?

EDIT:

HTML is similar to the code below. In response to it being a double binding issue: there are no events bound anywhere: I am calling toggle form the console and seeing the ‘fired twice behavior’…

<div class="popup_outer_wrapper">
   <a href="#" id="toggle_link">Show/hide</a>  # nothing is bound to this link atm!
   <div id="popup_inner_wrapper">
     <div class="popup_body">
       contents..
     </div>
   </div>
</div>

UPDATE:

It seems i might be encountering the same problem as described here: JQuery Toggle not working as it should. The problem being some of those divs are positioned absolute. For some reason .toggle() will not work with absolute positioned divs.

Can anyone confirm?

Answer 1

It seems i might be encountering the same problem as described here: JQuery Toggle not working as it should. The problem being some of those divs are positioned absolute. For some reason .toggle() will not work with absolute positioned divs.