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...

score 4 · Accepted Answer · answered Sep 06 '13 at 06:38

4

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

answered Sep 06 '13 at 06:38

Robin Jonsson

2,761
3
22
42

You linked to his original fiddle – DiMono Sep 06 '13 at 06:42
The downside of this approach is that the container takes the `60px` space even when the div is closed behind it – RJo Sep 06 '13 at 07:00
I added some content before and after the code in this answer. See http://jsfiddle.net/BBHJc/ One thing is the RJo mentioned space even when closed. I guess JS is the only way to hide/remove that? The other thing is the height that is set. If the user has a larger font (not just by enlarging with CTRL +, but by going into the settings of the browser), things does not look good either. How can this be solved (I guess with JS/jQuery, or? and if so, how exactly)? – EricC Sep 06 '13 at 14:31
Here (http://jsfiddle.net/PcU7N/2/) is a working example of using css3 animations and not specifying the height for the containing element. This works regardless of the font size specified. The downsides are that you have to specify the `max-height` property to the `div.two` that is larger that the content will be (see http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto). – RJo Sep 09 '13 at 05:23

score 3 · Answer 2 · edited May 23 '17 at 12:01

(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.

Why would he do that when he got fancy css3 animations instead? (Which are WAY smoother) — Robin Jonsson, Sep 06 '13 at 06:41
Since he probably will not want the div to disappear after the hover has ended — RJo, Sep 06 '13 at 06:44
Or maybe he does, like some kind of info-box sliding down under a settings-option? — Robin Jonsson, Sep 06 '13 at 07:31
The description says: "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)." Anyway, in the other example, the sliding down `div` disappears when you move the mouse out of the "hover" area. — RJo, Sep 06 '13 at 08:40
Then please mark it as the accepted answer, if it best solves the problem described in the question :) See http://meta.stackexchange.com/questions/93969/is-changing-the-accepted-answer-frowned-upon — RJo, Sep 10 '13 at 10:18

Sliding down new div below another div

2 Answers2

More javascript :)

Linked