それは通常隠されているが、クリックすることで中身を開示する（アコーディオンメニュー、details、summary）

　職業訓練でHTMLを勉強したのは2018年12月からの約3か月間でしたが、それ以降で知ったタグで面白いものをがあったので残しておきます。

　長い文章や補足説明を通常折りたたんでおいて、要素をクリックすると広がって中身を見ることが出来るアコーディオンメニュー。実装する際はJQやチェックボックスを駆使する方法がありますが、HTML単体で該当する機能をもつのが「details」です。
使い方は簡単で、「details」で括った中で見出しになる文章を「summary」で括り、その下に折りたたんでおく内容を挿入します。

<div class="box_d">
<details>
<summary> おすすめのぶた </summary>
<ul class="">
<li>あぐーぶた</li>
<li>くろぶた</li>
<li>ヨークシャー種</li>
<li>広東ぶた</li>
<li>日無化の黒豚</li>
<li>ゲッター種</li>
<li>安芸錦</li>
<li>煉瓦ぶた</li>
</ul>
</details>
<details>
<summary> おすすめのガンダム </summary>
<ul class="">
<li>エクシア</li>
<li>RX78-2</li>
<li>刹那</li>
<li>ユニコーン</li>
</ul>
</details>
</div>

画面上では「summary」で括った見出しのみが表示されており、これをクリックすると設定した一覧や文章などが出てきます。ご丁寧に見出しの横に▲が付いており、その向きで開閉の状態を教えてくれるオマケ付きです。

非常に簡単なのですが、ビジュアル的に以下の課題があります。
１：そのままだと開閉する（操作可能な要素であるか）のか判り難い。
２：表示がON/OFFのみで、アニメーションしない。

「1」はユーザーに操作の可否が判り難いので、「summary」に「cursor: pointer;」を設定してあげる方が親切です。見出しの文章内容で察してくれる可能性は高いですが念のため。見出し横の三角形の存在は、必ずしも操作可能であることをユーザーに印象付けることを保証はしてくれません。

「２」は見出しをクリックした際にデフォルトではアニメーションしてくれません。パっと表示され、パっと消えます。ビジュアル的なものが求められない場所であればそのままでもいいのですが、そうでなければ使い難い仕様です。

「details」に「transition」を仕込んでも、アコーディオンメニューでよく見る「下に伸びる（？）アニメーション」は再現されません。
先人のサイトを幾つか巡りましたが、こちらで開閉前と後で高さ設定することで再現する旨の記述がありました。

details {
transition: .3s;
height:2rem;
}
details[open] {
height:10rem;
}

これで、開いたときに伸びた感じで表示されてくれます。
ただこれだと開いた際の高さの設定より、中の要素の高さの値が大きいと表示がおかしなことになってしまいます。
それをを回避するために、「overflow」を使用する方法も検討しました。

.t_test00 details ul {
height:70%;
overflow-y: scroll;
}

ですが、これではアコーディオンメニューの利点（不要な時は閉じて、必要な時にパット閲覧できる）からズれてしまう感じがします。だからと言って個々で高さ設定するのは手間がかかりますし、JSなどで中の要素の高さを拾ってはめ込むなら、素直にJQのアコーディオンメニューを使う方が手っ取り早いです。

これまでのアコーディオンメニューに比べれば万能ではありませんが、HTML＆CSSだけで設置できますし、開いたときの高さを固定しても不具合が生じない場合は利便性があると思います。

引用先：
Webクリエイターボックス さま