Question

I have used jQuery’s slideToggle on a <div> to give the good old ‘dropdown’ effect.

I had it working exactly how I wanted in chrome. I then tried it in IE and came across something quite odd.. I could see the animation fine, the <div> would expand to its full height, but then when the animation finished, the <div> would disappear?

I tried a few different things to stop it doing it and it turns out that giving the <div> any min-height (I gave it 1px) allows it to work.

I’d really like to know why it’s neccessary to give a min-height in IE to make this function work properly? It’s no big deal having it there but I’d rather understand why I have to have it there. Code below.

The HTML Structure

<div class="home_popConfiCont rbAll">
<div class="home_popConfiHead">Your Confidential Details<div class="arrow-up"></div></div>
<div class="home_popConfiBody">
    Lots and lots of text
</div>
</div>

jQuery

$(function(){
    var confOpen = 0;
    $(".home_popConfiHead").click(function(){
        if(confOpen){
            $(".arrow-up").attr("class","arrow-up");
            $(".home_popConfiBody").stop(true, true).slideToggle(100);
            confOpen = 0;
        }
        else{
            $(".arrow-up").attr("class","arrow-up arrow-down");
            $(".home_popConfiBody").stop(true, true).slideToggle(100);
            confOpen = 1;
        }
    });
});

The CSS applied to the said <div>:

.home_popConfiBody{padding:5px 5px 0 5px; display:none;line-height:20px;min-height:1px;}

Answer 1

You are probably running into the “hasLayout” issue.

http://reference.sitepoint.com/css/haslayout

There are a number of things that can give your div a layout, you have discovered one of them: min-height. In addition to min-height you can also use these values (taken from the referenced article):

• display: inline-block
• height: (any value except auto)
• float: (left or right)
• position: absolute
• width: (any value except auto)
• writing-mode: tb-rl
• zoom: (any value except normal)4
• min-height: (any value)
• max-height: (any value except none)
• min-width: (any value)
• max-width: (any value except none)
• overflow: (any value except visible)
• overflow-x: (any value except visible)
• overflow-y: (any value except visible)5
• position: fixed

I think people will generally use zoom: 1 to trigger layout because it doesn’t have any noticeable visible effect on the page contents.

If the div I am toggling has floated elements inside of it, then I will generally apply an overflow: hidden; to the div. This causes the div to expand to the height of the floated elements inside.