<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 { height: 71px; transition: all ease-in-out .3s; border-left: 2px solid #00a5a0; border-right: 2px solid #00a5a0; box-sizing: border-box; &:last-of-type { border-bottom: 2px solid #00a5a0; } } .details[open] { height: 200px; background-color: #bee1de; } .details-summary { display: block; padding: 20px; border-top: 1px solid #00a5a0; font-size: 20px; font-weight: bold; transition: all ease-in-out .3s; &:hover { cursor: pointer; background-color: #bee1de; } } .details-summary::-webkit-details-marker { display: none; } .details-content { margin: 0 20px 20px; padding: 20px; height: 70px; overflow: hidden; overflow-y: auto; background-color: #fff; } .details[open] .details-content { animation: fadeIn .3s ease; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } } /* 以下の記述は不要です */ body { margin: 20px; }