2018-12-12 cssだけでアコーディオン表示 HTML <div class="hidden_box"> <input type="checkbox" id="label1" /> <label for="label1">クリック</label> <div class="hidden_show"> <!--非表示ここから--> <p>こんにちは</p> <!--ここまで--> </div></div> CSS /*全体*/.hidden_box { margin: 2em 0; padding: 0;} /*ボタン装飾*/.hidden_box label { padding: 15px; font-weight: bold; background: #efefef; border-radius: 5px; cursor :pointer; transition: .5s;} /*アイコンを表示*/.hidden_box label:before { display: inline-block; content: '\f078'; font-family: 'FontAwesome'; padding-right: 5px; transition: 0.2s;} /*ボタンホバー時*/.hidden_box label:hover { background: silver;} /*アイコンを切り替え*/.hidden_box input:checked + label:before { content: '\f00d'; -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); color: #668ad8;} /*チェックは見えなくする*/.hidden_box input { display: none;} /*中身を非表示にしておく*/.hidden_box .hidden_show { height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;} /*クリックで中身表示*/.hidden_box input:checked + label + .hidden_show { padding: 10px 0; height: auto; opacity: 1;} 上記のコードのみで、 ボタンクリックで姉妹要素がスルスルっと出てきて、同時にボタンのデザインも⬇︎から✖︎に変わる。 参考サイトはCSSだけでアコーディオンを作る方法(レスポンシブ&矢印付)です。