仮想シートを積み重ねてCSSで再配置する

Question

私は実際のライブメタファとして紙のシートとして似ています。 私はそれらのシートをお互いの上にきちんと積み重ねて、カバーされたシートのヘッダを表示し、残りのもの（コンテンツ）を覆うだけでいいと思います。ここに示す：

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

私はまた、他のすべてのシートがアクティブシートの内容を明らかに下方に移動しなければならないことを意味し、任意のシート「アクティブ」にできるようにしたいです。

などがここに示されている。そのために

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

、私は（一定の高さだけでdiv要素に適しています）、負のトップマージンといくつかのDIVコンテナを設定しようとしました。私はアクティブなシートのDIVに添付して内容を明らかにするためにいくつかの.activeクラスを作成しました。

マイCSS：

 

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


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

あなたはおそらくすぐに見ることができるように、これが唯一の固定の高さのために動作します。 私は解決策を探していますが、シートの高さを変えて作業しています。

アイデア？ （ところで：IE < 9のような安っぽいブラウザをサポートする必要はありません）

Answer 1

私はあなたが望むものを理解していれば、これはjQuery UI accordionはまったく同じものです。

あなたはこのマークアップ

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

とそのネイティブの高さに応じたコンテンツのサイズこのjQueryの

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

でそれを設定することができます。