Stacking virtual sheets of paper and re-arranging them via CSS

I'm trying to resemble as stack of 开发者_如何转开发paper sheets as a real live metaphor. I'd like those sheets neatly stacked on top of each other, only showing each covered sheet's header and covering the rest (content). Shown here:

!--------------
| Sheet 1
+--------------
| Sheet 2
+--------------
| Sheet 3
|
|
|

I also want to be able to 'activate' any given sheet, that means all other sheets should be moved downwards to uncover the active sheet's content.

Like shown here:

!--------------
| Sheet 1
+--------------
| Sheet 2
|
| Sheet 2 content
| goes here
| this sheet is 
| 'active'
|
+--------------
| Sheet 3
|
|
|

For that, I've tried to set up some DIV containers with negative top margins (which works well for DIVs with fixed height only). I also created some .active class to be attached to the active sheet's DIV to reveal it's content.

My CSS:

    .sheet {
      position: relative;
      width: 650px;
      height: 550px;    
      margin: -465px auto 0 auto;
    }


    .sheet .active + .sheet {
      margin: 0 auto 0 auto;
    }

As you can probably see immediately, this only works for fixed heights. I'm searching for a solution also working with variable heights for the sheets.

Any ideas?

(By the way: No need to support crappy browsers like IE<9)

If I understand what you want, this is exactly what the jQuery UI accordion does.

You could set it up with this markup

<div id="sheets">
  <h3><a href="#sheet1">Sheet 1</a></h3>
      <div>
       Content for sheet 1 goes here
      </div>
      <h3><a href="#sheet2">Sheet 2</a></h3>
      <div>
       Content for sheet 2 goes here
      </div>
      <h3><a href="#sheet3">Sheet 3</a></h3>
      <div>
       Content for sheet 3 goes here
      </div>
</div>

and this jQuery

$("#sheets").accordion({
  autoHeight: false
});

which sizes the content according to its native height.