Question

I’ve got the following piece of Jquery:

$("#collapse-menu > li > a").click(function() {
    $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
});

What it basically does is expands or collapses a menu of nested “lists” which contain dropdowns (simplified example):

<ul id="collapse-menu">
   <li><a class="expanded">Basic Details</a>
      <ul>
         <li>
            <select> .... </select>
         </li>
         <li>
            <select> .... </select>
         </li>

The code works absolutely fine EXCEPT when a large value is selected in any of the dropdowns. At that point, when clicked, the menu will still expand/collapse correctly but “flash” quickly while doing so, as if the entire element was being reset somehow. The data itself is fine but it’s the flashing that’s unwanted.

The strange thing is that if a small value is selected in a dropdown, there’s no flashing. When a large value is selected (say, above 30 in an age dropdown of 18-99), the flashing starts happening.

Can anyone tell me why this is happening? Or whether there’s something not right about the Jquery that’s causing this.

Thanks.

UPDATE:

Adding a bounty to this. Have tried a few similar plugins/solutions out there on the net but they all seem to suffer from this “flashing” problem when large dropdown values are selected by default.

If it helps, here’s a typical similar solution: http://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html# … but it suffers from the same problem when dropdowns are added inside the accordion.

I hope someone has a clean solution, instead of needing to hack this somehow.

Answer 1

From my observation: The issue seems Operating System dependent. The selects are painted by system, as they’re system controls. On my Linux machine I experience no problems with blinking animation in the http://jsbin.com/ixake example. I expect You tested it on Windows (r)

It looks like the select is “scrolled” to the proper value everytime it’s repainted. And that happens a lot while animating.

The easiest solution would be to substitute system selects with html-based selects to remove system dependency. There are unobtrusive jquery plugins that will do it for You.

Try this or pick any from here if that first one wasn’t too good.

After that Your animation should depend only on JS and styling.