css - CSS3 で完全に展開/折りたたむ

Question

私がフロントエンドの開発を担当していた頃は、CSS と JavaScript を使用して展開/折りたたみの動作を実現することしかできませんでした。展開/折りたたみソリューションを完全に CSS3 でコーディングすることは既に可能ですか?

編集:私がやろうとしているのはこのようなものですが、ここではjQueryを使用しています。

Answer 1

hereから借りて、わずかに調整したとおり：

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
    display: none;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   display: block
}

フィドル。

FadeIn を使用した高度なショーケース: (コメントで指摘されているように、編集済み、キーフレームは必要ありません!) http://jsfiddle.net/Dxvf7/2/

/* Default State */
 div.container > div {
    background: green;
    width: 400px;
    height: 100px;
    line-height: 100px;
    color: white;
    text-align: center;
    opacity: 0;
    height: 0;
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear;
}
/* Toggled State */
 div.container > input[type=checkbox]:checked ~ div {
    opacity: 1;
    height: auto;
}