この記事は2019年10月30日に書かれたもので、内容が古く現在では推奨されていない方法の可能性もありますのでご注意ください。 CSSとcheckboxを使ってアコーディオンメニューを実装するサンプルです。 展開する要素の高さが変わっても(テキストの量が増えても)、大丈夫な作りにしました。 極力自然なアニメーションを心掛けたのですが、JavaScriptで実装した方が動きは滑らかな気がします。 別記事のjQueryのslideToggleを使ってアコーディオンを実装するサンプルと、ネイティブのJavaScript(脱jQuery)でアコーディオンメニューを実装するサンプルとの比較も兼ねて作ったので、htmlは似た構成にしています。 html <input type="checkbox" name="accordion" class="accordion-checkbox" id="acco