<details>と<summary>はアコーディオンのような折りたたみ要素を作る場合に最適です。
この2つのタグだけで、アコーディオンの開閉が出来ます。
今回はシンプルな作りですが、ちょっとだけ工夫して三角アイコンをアニメーションで動かす作りにしてみます。
◆まずはデモページをご覧ください。
デモページを見る
◆HTMLはシンプルな作りです
HTML
<details>
<summary>果物リスト</summary>
<ul>
<li>りんご</li>
<li>ばなな</li>
<li>みかん</li>
<li>いちご</li>
<li>ぶどう</li>
</ul>
</details>
<summary>果物リスト</summary>
<ul>
<li>りんご</li>
<li>ばなな</li>
<li>みかん</li>
<li>いちご</li>
<li>ぶどう</li>
</ul>
</details>
◆CSSでは、三角アイコンを右向きと下向きをアニメーションにしています。
CSS
details {
background: #e4ecff;
border-radius: 10px;
overflow: hidden;
}
background: #e4ecff;
border-radius: 10px;
overflow: hidden;
}
summary {
position: relative;
color: #fff;
padding: 1rem 1rem 1rem 2.5rem;
background: #2d5fe0;
cursor: pointer;
}
summary::before {
position: absolute;
content: '';
top: 1.5rem;
left: 1.5rem;
border-width: 0.4rem;
border-style: solid;
border-color: transparent transparent transparent #fff;
transform: rotate(0);
transform-origin: 0.2rem 50%;
transition: 0.25s transform ease;
}
details[open] > summary::before {
transform: rotate(90deg);
}
details > ul {
padding: 1.5rem;
}
<details>と<summary>を使ったアコーディオンはシンプルで作りやすいため、色々なところで使えると思います。