Result
今更感半端ないですが、CSSのみでアコーディオン
全部開けられるやつと1つ開けると他が自動で閉まるやつの2パターンあります
両方ともinput要素と:checkedを使います
違いはcheckboxかradioか、なので基本的には同じコードで動きます
css
input {/*input要素自体は非表示にしておく*/ position: absolute; opacity: 0; z-index: -1;}/*アコーディオンのスタイリング*/.tabs { border-radius: 8px; overflow: hidden; border:1px solid #ddd; border-top:none;}.tab { width: 100%; color: white; overflow: hidden;}.tab-label { display: flex; justify-content: space-between; padding: 1em; background: #2c3e50; font-weight: bold; cursor: pointer;}.tab-label:hover { background: #1a252f;}.tab-label::after { content: "\276F"; width: 1em; height: 1em; text-align: center; transition: all .35s;}.tab-content { max-height: 0; padding: 0 1em; color: #333; background: white; transition: all .35s;}.tab-close {/*閉じるボタン*/ display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: #2c3e50; cursor: pointer;}.tab-close:hover { background: #1a252f;}/*チェックが入ってる時のスタイル*/input:checked + .tab-label { background: #1a252f;}input:checked + .tab-label::after { transform: rotate(90deg);}input:checked ~ .tab-content {/*チェックが入ったら開く*/ max-height: 100vh; padding: 1em;} |
html
<div class="row"> <div class="col"> <h2>複数同時に開けられるやつ</h2> <div class="tabs"> <div class="tab"> <input type="checkbox" id="chck1"> <label class="tab-label" for="chck1">Item 1</label> <div class="tab-content"> hogehgehogehge </div> </div> <div class="tab"> <input type="checkbox" id="chck2"> <label class="tab-label" for="chck2">Item 2</label> <div class="tab-content"> foo bar! </div> </div> <div class="tab"> <input type="checkbox" id="chck3"> <label class="tab-label" for="chck3">Item 3</label> <div class="tab-content"> hogehgehogehge </div> </div> </div> </div> <div class="col"> <h2>1つ開けると他が閉まるやつ</h2> <div class="tabs"> <div class="tab"> <input type="radio" id="rd1" name="rd"> <label class="tab-label" for="rd1">Item 1</label> <div class="tab-content"> hogehoge </div> </div> <div class="tab"> <input type="radio" id="rd2" name="rd"> <label class="tab-label" for="rd2">Item 2</label> <div class="tab-content"> foo bar! </div> </div> <div class="tab"> <input type="radio" id="rd3" name="rd"> <label class="tab-label" for="rd3">Item 3</label> <div class="tab-content"> piyo </div> </div> <div class="tab"> <input type="radio" id="rd4" name="rd"> <label for="rd4" class="tab-close">アコーディオンを閉じる ×</label> </div> </div> </div></div> |
