Question

I have a div, and following it is a ul.

I apply slideDown to the div, and that pushes the ul down nicely, in all browsers.

However, when I apply slideUp to the div, in all broswers the ul comes up nicely after
the div has finished sliding up, but in Chrome, the ul comes up while the div is sliding up, and then it looks messy for a few seconds until the div disappears.

You can see an example here:

The slideDown and slideUp are activated when you click this image:

It makes this div appear or disappear:

And this is the ul that is supposed to go down and up when that div appears and disappears, respectively:

And here is the code. The HTML:

<div class="clearfix" id="whatWhere">
<ul>
<!--what-->
    <li id="what">
        <span>מה</span>
         <div class="list">
            <ul class="">
              <li class="orange"><a href="http://dev.linux.ort.org.il/colleges?cat=7">אדריכלות ועיצוב פנים</a></li>
              <li class="gray"><a href="http://dev.linux.ort.org.il/colleges?cat=14">אלקטרוניקה</a></li>
              </ul>    
             <div class="toClose">
             <img width="37" height="18" src="http://dev.linux.ort.org.il/colleges/wp-content/themes/twentyeleven/images/close.png">
             </div>
            </div><!--end list-->
    </li>
 <!-- where -->
    <li id="where">
            <span>איפה</span>
            <div class="list">
            <ul class="">
                <li class="orange"><a href="http://dev.linux.ort.org.il/colleges/?p=21">מכללת אורט כפר סבא</a></li>
                <li class="gray"><a href="http://dev.linux.ort.org.il/colleges/?p=19">מכללת אורט קרית ביאליק</a></li>
            </ul>

                 <div class="toClose">
             <img width="37" height="18" src="http://dev.linux.ort.org.il/colleges/wp-content/themes/twentyeleven/images/close.png">
             </div>
                </div><!--end list-->
     </li>
   </ul>
</div>

<ul id="links">
   <li id="hashlama"><a href="http://dev.linux.ort.org.il/colleges/?p=161">השלמה לתואר ראשון להנדסאים</a></li>
   <li id="michlalot"><a href="http://dev.linux.ort.org.il/colleges/?p=165">מכללות אקדמיות להנדסה</a></li>
</ul>

And this is the JavaScript:

                  $(document).ready(function() {  
                  $("#whatWhere ul li  span").click(function () {
                      //if another li open- closed;
                    if($(this).parent().siblings().children(".list").hasClass("highlight")){
                        // $(this).parent().siblings().children("ul").slideUp("slow"); 
                        $(this).parent().siblings().children(".list").css("display","none"); 
                         $(this).parent().siblings().removeClass("open");
                         $(this).parent().siblings().addClass("standBy");
                         $(this).parent().siblings().children(".list").toggleClass("highlight");   
                    } 
                    //open ul of selected li area
                    $(this).next().toggleClass("highlight");   
                    if($(this).next().hasClass("highlight"))
                        {
                        //#whatWhere
                            $(this).parent().parent().parent().addClass("open");
                            //li
                             $(this).parent().addClass("open");
                             $(this).next().slideDown("slow");
                             $(this).parent().siblings().addClass("standBy");
                             $(this).parent().removeClass("standBy");
                        }
                    else
                        {
                         $(this).parent().parent().parent().removeClass("open");
                         //li
                             $(this).parent().removeClass("open");
                         $(this).next().slideUp("slow"); 
                        // $(this).next().css("display","none"); 
                         $(this).parent().siblings().removeClass("standBy");
                         $(this).parent().removeClass("standBy");
                        }
                    }); 

                    $("#whatWhere ul li  .list  div.toClose").click(function () {
                         $(this).parent().parent().parent().parent().removeClass("open"); /*div #whatWhere*/
                             $(this).parent().parent().removeClass("open"); /*li #what/#where*/
                         $(this).parent().slideUp("slow"); 

                         $(this).parent().parent().siblings().removeClass("standBy");/* the other li #what/#where*/
                          $(this).parent().toggleClass("highlight");   /* div .list - maybe not needed*/
                    }); 
                });

Answer 1

Add “height: auto” to your div with id “whatWhere” permanently and it should work.