<details class="details"> <summary class="details-summary">1つ目のアコーディオンのタイトル</summary> <p class="details-content"> ここは、1つ目のアコーディオンの中身です。<br> ここは、1つ目のアコーディオンの中身です。<br> ここは、1つ目のアコーディオンの中身です。 </p> </details> <details class="details"> <summary class="details-summary">2つ目のアコーディオンのタイトル</summary> <p class="details-content"> ここは、2つ目のアコーディオンの中身です。<br> ここは、2つ目のアコーディオンの中身です。<br> ここは、2つ目のアコーディオンの中身です。<br> ここは、2つ目のアコーディオンの中身です。<br> ここは、2つ目のアコーディオンの中身です。<br> ここは、2つ目のアコーディオンの中身です。<br> </p> </details> <details class="details"> <summary class="details-summary">3つ目のアコーディオンのタイトル</summary> <p class="details-content"> ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。ここは、3つ目のアコーディオンの中身です。 </p> </details>
.details { transition: .3s; overflow: hidden; margin-top: -10px; padding-bottom: 20px; &:last-of-type { margin-bottom: 0; } } .details[open] { margin-top: 0; padding-bottom: 10px; } .details-summary { display: block; padding: 15px; transition: .3s; transform: translateY(10px); background-color: #00a5a0; font-size: 20px; font-weight: bold; color: #fff; &:hover { cursor: pointer; } } .details-summary::-webkit-details-marker { display: none; } .details[open] .details-summary { transform: translateY(0); } .details-content { padding: 20px; background-color: #bee1de; border-bottom: 2px solid #00a5a0; border-left: 2px solid #00a5a0; border-right: 2px solid #00a5a0; } /* 以下の記述は不要です */ body { margin: 20px; }