Sliding down new div below another div

Question

I want to have a new/hidden div slide down from below another div. The idea is that I have a input field and a add-button. When the add-button is clicked, more form elements are revealed (slide out below). The form-part of this is not important for my problem, so I just let the first div be the text "hover me to reveal new div" and the new sliding-down-div be some random text.

So far I have this html:

<div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>    

And this css:

.one {
    position: relative;
    top: 100px;
    background-color: lightblue;
    z-index: 1;
}

.two {
    position: absolute;
    top: 60px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
    }

.one:hover + .two {
    top: 100px;
}

See jsfiddle: http://jsfiddle.net/8ZFMJ/

This kind of works. But the second div is higher than the first div, so it is visible above the first div, I do not want that. How can I make it slide down the first div in the way that I want? If I in the process end up not having the first div to have to know the position of the first div, that would be good too...

Answer 1

Put the two divs in a container (With the height of the two divs combined.), and put your divs to be at the very top of the container. Then set the container to overflow:hidden;

Something like this: http://jsfiddle.net/8ZFMJ/2/

Regards

Answer 2

(Edited to use css3 animations instead of jQuery's slideDown() )

This solution works without having the additional white space below the hovered element. In addition, you don't have to specify the height for the containing element.

We have to animate the container's max-height here instead of height (see How can I transition height: 0; to height: auto; using CSS? ). See this JsFiddle for a working version where the underlying element is shown on hover and closed on clicking it.

The downside of this approach is that you have to specify a max-height attribute to the sliding element so that the attribute's value is greater than the element's content will ever be. Since the animation works on the max height of the element, it also cannot be ridiculously large (see example below).

An example : The opened max-height is set to 500px , the actual content height is 100px , and the transition animation lasts for 5 seconds. The first second of the opening animation is used for showing the contents, and the next four seconds are not visible to the user. Note that this works in both ways, so that the closing animation starts four seconds after clicking the element.

More javascript :)

It is indeed possible to get the needed height for the inner elements by using jQuery's functions. The following example demonstrates the use of css3 animations with jQuery to avoid the problem described above.

The key is to wrap the elements of the sliding down element to a div and calculate its needed height on hover. See the working Js Fiddle

var contentHeight = $('.two').children('div').outerHeight();
$('.two').css('max-height', contentHeight + 'px')

The above solution probably solves all your needs. However, it is unclear to which extent you are willing to use javascript.