CSS3：CSSのみでのアコーディオン表現

See the Pen CSS only accordion by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

実はそんなに難しいことしてません。

<div class="layers">
  <a href="#" class="back1">1</a>
  <a href="#" class="back2">2</a>
  <a href="#" class="back3">3</a>  
</div>

HTMLは上記のようにごくシンプルで、3つある「back」に通常33%の幅をセットしています。

要としては下記部分です。

.layers:hover [class*=back] {
  width: 25%;
}
.layers:hover [class*=back]:hover {
  width: 50% !important;
}

backを囲んでいる「layers」にオンマウスした時は「back」を25%に、しかしその中でさらにオンマウスされている「back」は50%にしています。

それをCSS3の「transition」プロパティを使いアニメーション表現にすることでアコーディオン的な伸縮を表現しています。

ザックリ作ったので表示に粗いところもありますが、こうしたことも出来るという例で。