【HTMLのみ】ボタンクリックでボタン下部の表示・非表示を切り替える

detailsタグとsummaryタグ

こちらがとても便利だと思ったため、投稿します。

※現在、IEとEdgeは未対応となっております。
※HTMLの対応バージョンや使用方法の詳細については参考URLを参考にしてください。

具体的な使用例

index.html

 <details>
   <summary>ボタンとして表示したい文字列</summary>
   クリック時に表示したい文字列
 </details>

動作確認

ボタンとして表示したい文字列

クリック時に表示したい文字列

備考

cssと組み合わせてレイアウトの修正も可能です。

参考URL

・MDN web docs | details 詳細折りたたみ要素

・MDN web docs | summary 概要明示要素