How to slide div down and reveal hidden div?

Question

i have a hidden div under header and want it to appear by sliding down on user click. But, i cannot achieve sliding effect even if my code appears to be right. Can you help me to find out what is a problem? I believe problem is in this:

#logRegFormContainer{
    display: none;
    z-index: 11;
    position: relative;
    min-width: 980px;
    min-height: 80px;
    opacity: 0.9;
    background-color: red;
    box-shadow: inset 0 0 10px black;
}

JSfiddle is here.

Answer 1

The problem is the use of min-height in the CSS (though I'm unsure as to why min-height causes this problem); if this is replaced by height then it works: JS Fiddle demo .

Answer 2

Remove min-height property.

This will prevent the div from being any height less than 80px, and therefore prevent slide animation.