JQuery slide content up or down with container

Question

Therefore, when using functions, JQuery slideUpor the slideDowncontainer on which the function is called executes a slide, but the content remains placed.

Example

I want the contents to move along with the container. If you move left or right, you can see the correct effect .

I experimented a bit with various mechanisms trying to find solutions (as you probably can tell from jsfiddle), but failed.

How can you make the contents of a container slide up or down with the container when hiding or showing? The solution should be applicable to a variable number of containers stacked on top of each other.

UPDATE:

Using Nando's answer, I made a working solution .

Answer 1

SlideUp or Slidedown only controls the height of the elements. If you want to move content inside this managed element, you need to create a custom animation.

Run the animation on the outside, which controls the height, and the second animation on the inside, which controls the css top property.

<div class="outer">
  <div class="inner">

  </div>
</div>

Otherwise, you can set the position of the internal absolute value at the bottom of the external something like this .

.outer {
    position:relative;
    height:200px;
    display:none;
    width:300px;
    overflow:hidden;
}

.outer > .inner {
    position:absolute;
    width:300px;
    height:200px;
    background-color:red;
    bottom:0px;
}

<div class="outer">
    <div class="inner">
        Content<br />Content<br />Content
    </div>
</div>

Answer 2

Wrap all content inside a single div and set it to position:absolute.

single_alert_update("<div style='position:absolute; bottom:0px; width:55%; text-align:right;'>Notice " + (++count)+"</div>");

#global-alerts .alert , .

Nando , .

Fiddle