JavaScriptを使わないaccordionと横並びの可能性

こんにちは、スウェルデザインのWです。

アニメーションで縦に表示されるアコーディオンを

CSSのみで可能にしたソースを紹介します。

下記サイトを参考に作成いたしました。

しかし今回これを横並びにして使う際に、問題が発生したのです。

実際に触ってみていただければわかると思いますが、下記の通り

メニューを開くと、横並びになっている要素がつられて下に下がってしまします。

See the Pen KdRbMJ by swelldesign (@w-swelldesign) on CodePen.

ｄivを縦に分けたり。positionを使ったり色々と試しましたがどれもうまくいきませんでした。

試行錯誤した結果

下記方法でうまく行ったので備忘録として記録します。

See the Pen NGMeNL by swelldesign (@w-swelldesign) on CodePen.

原因は以前紹介したdisplay: inline-block;でした。

横並びにするさい、他の要素に影響されないようにfloat: left;で浮かせてやる必要があったみたいです。

皆普通にfloat: left;を使っているからなのか、検索しても出てきませんでした。

自己解決に至るまで随分かかりましたので他の人の役に立てればと思います。