[CSS]この発想はなかった！inputとlabelを使って実装する美しいデザインのアコーディオン

パネルが開いた+ホバー時 パネルが開いている時のアローは上向きに変わります。 デモでは上記のチェックボックス版だけでなく、ラジオボタン版などもあります。 デモページ：チェックボックス版 デモページ：ラジオボタン版 デモページ：チェックボックス版・デフォルトオープン 実装 HTML 一つのアイテムに含まれるのは、チェックボックス、ラベル、コンテンツの3つです。それらをdiv要素で内包します。 <section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">About us</label> <article class="ac-small"> <p>Some content... </p> </article> </div> <div> <