アコーディオンで開閉する
アコーディオン1のコンテンツです。
アコーディオン2のコンテンツです。
アコーディオン3のコンテンツです。
<div class="accordion"> <input type="checkbox" id="item1"> <label for="item1"><span>▼</span>アコーディオン1</label> <div class="content"> <p>アコーディオン1のコンテンツです。</p> </div> </div> <div class="accordion"> <input type="checkbox" id="item2"> <label for="item2"><span>▼</span>アコーディオン2</label> <div class="content"> <p>アコーディオン2のコンテンツです。</p> </div> </div> <div class="accordion"> <input type="checkbox" id="item3"> <label for="item3"><span>▼</span>アコーディオン3</label> <div class="content"> <p>アコーディオン3のコンテンツです。</p> </div> </div>
.accordion { display: flex; flex-direction: column; margin: 1em 0 1.5em; } .accordion input[type="checkbox"] { display: none; } .accordion label { cursor: pointer; background-color: #eee; padding: 10px; margin: 0; display: block; font-weight: bold; color: #444; border-bottom: 1px solid #ccc; } .accordion .content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background-color: #f9f9f9; padding: 0 10px; border-bottom: 1px solid #ccc; } .accordion input[type="checkbox"]:checked ~ .content { max-height: 100%; padding: 10px 10px; } .accordion label span { cursor: pointer; margin-right: 10px; } .accordion input[type="checkbox"]:checked ~ label span { transform: rotate(180deg); display: inline-block; }
「もっと見る」ボタンで開く
「もっと見る」のコンテンツです。
<div class="accordion-see-more"> <input type="checkbox" id="item4"> <label for="item4">もっと見る</label> <div class="content"> <p>「もっと見る」のコンテンツです。</p> </div> </div>
.accordion-see-more { display: flex; flex-direction: column; margin: 1em 0 1.5em; } .accordion-see-more input[type="checkbox"] { display: none; } .accordion-see-more .content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 10px; } .accordion-see-more input[type="checkbox"]:checked ~ .content { max-height: 100%; padding: 10px 10px; } .accordion-see-more input[type="checkbox"]:checked ~ label { display: none; } .accordion-see-more label { display: flex; justify-content: center; align-items: center; position: relative; width: 90%; margin: 1em auto; padding: .9em 2em; border: 1px solid #e78888; border-radius: 5px; background-color: #fff; color: #e78888; font-size: 1em; } .accordion-see-more label:hover { animation: anima-button-030 1s; } @keyframes anima-button-030 { 0% { box-shadow: 0 0 0 0 rgb(231 136 136 / 50%); } 100% { box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%); } }