JQuery slide content up or down with container

Question

So when using the JQuery slideUp or slideDown functions, the container on which the function is called performs the slide, but the content stays put.

An Example

I would like the content to move with the container. If you slide left or right you can see the correct effect.

I experimented a bit with the various engines trying to find a solutions (as you can probably tell from the jsfiddle), but have not succeeded.

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

UPDATE:

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

Answer 1

SlideUp or Slidedown only manipulates the height of elements. If you want to move the content inside that manipulated element, you need to create a custom animation.

Run an animation to outer, which manipulates the height and a second animation to inner, which manipulates the css top property.

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

  </div>
</div>

Otherwise you can set the position of inner absolute to the bottom of outer 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>