よくある質問でよく利用するアコーディオン機能をCSSアニメーションとHTMLで実装する方法です。JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。
アコーディオンをCSSアニメーションとHTMLで実装する | Pulp Note
よくある質問でよく利用するアコーディオン機能をCSSアニメーションとHTMLで実装する方法です。JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。
CSS | prag by pranktone -ありきたりな日常とそれとない非日常を紡ぐ記録。-
この記事は2019年10月30日に書かれたもので、内容が古く現在では推奨されていない方法の可能性もありますのでご注意ください。 CSSとcheckboxを使ってアコーディオンメニューを実装するサンプルです。 展開する要素の高さが変わっても（テキストの量が増えても）、大丈夫な作りにしました。 極力自然なアニメーションを心掛けたのですが、JavaScriptで実装した方が動きは滑らかな気がします。 別記事のjQueryのslideToggleを使ってアコーディオンを実装するサンプルと、ネイティブのJavaScript（脱jQuery）でアコーディオンメニューを実装するサンプルとの比較も兼ねて作ったので、htmlは似た構成にしています。 html <input type="checkbox" name="accordion" class="accordion-checkbox" id="acco
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
