get rid of hiccup on toggle

Question

I am using jquery ui toggle for a dropdown on a map legend.

The problem is that when you click on the class to show the drop down div; there is a slight hiccup where the div jumps a bit. Anyone know why this is happening? Here's my html:

<h3 id="conservation-header">
<i class="icon-stop" style="color:#739435;"></i> 
<i class="icon-caret-down" style="color:#fff;"></i> 
<span class="dropdown">Conservation</span> &nbsp; 
<span class="extras" style="color:#739435;">[
<a style="color:#739435;" id="conservationMoreLink" href="#">info</a>] &nbsp; [
<a style="color:#739435;" >images</a>]</span>
</h3>

       <div class="dropThis" style="display:none;">
       <ul>
         <li>Preservation</li>
         <li>Silviculture</li>
         <li>Limited Agriculture consistent with resource value</li>
         <li>Environmental Services</li>
         <li>Mitigation</li>
         <li>Recreation</li>
         <li>Roadway Connections</li>
         </ul>
       </div>

Here's my jsfiddle

thanks in advance

Check this: http://stackoverflow.com/questions/166299/jquery-slidetoggle-jumps-around — sbeliv01, Nov 11 '13 at 22:38
The position:absolute addition seems to be simplest fix. Thank you @putvande — tyler_lisa, Nov 11 '13 at 22:49

score 2 · Answer 1 · answered Nov 11 '13 at 22:39

2

Set the ul style to:

margin-top: 0;

answered Nov 11 '13 at 22:39

Matthew Rapati

5,648
4
28
48

score 0 · Answer 2 · edited Apr 20 '15 at 06:06

0

I've been able to fix hiccups/jumps in the past by setting the backface- visiblity of the element (or any parent element) to 'hidden';

If you're testing this in Chrome, try adding -webkit-backface-visibility: hidden; to the body element and see if the problem is fixed.

More info on backface- visibility.

edited Apr 20 '15 at 06:06

Jad

479
2
10
23

answered Nov 11 '13 at 22:42

Kaiden

11
1

get rid of hiccup on toggle

2 Answers2