【意外と簡単】HTMLだけでアコーディオンメニューを作る方法を徹底解説！

HTMLのみを使用し、Q&Aなどで使われるアコーディオンメニューを付けたいと思ったことはありませんか。

今回はHTMLだけを使って、クリックすることでテキストが展開され、新しい情報を提示する、アコーディオンメニューを作る方法について解説してきます。

Contents

結論：HTMLのdetails要素でアコーディオンメニューを作る

アコーディオンメニューはHTMLのdetails要素を使うことで、作ることが出来ます。

今回はdetails要素を使って、具体的にどのようにアコーディオンメニューを作るのかを流れに沿って解説していきます。

アコーディオンメニューを作るために、まずはdetailsタグで基盤を作っていきます。

下記のコードを見てください。

<details>
  
</details>

HTMLファイルにdetailsタグを記述しました。

このdetailsタグはアコーディオンメニューの基盤となり、これからのコードはこのdetailsタグを親要素として記述していきます。

detailsタグだけではアコーディオンメニューとして不完全のため、ここから、元々表示されているテキストと、隠されているテキストについて解説していきます。

元々表示されているテキストはsummaryタグを使うことにより、記述することが出来ます。

下記のコードを見てください。

<details>
  <summary>元々表示されているテキスト</summary>
</details>

summaryタグを追記し、テキストとして『元々表示されているテキスト』を記述しました。

summaryタグとはアコーディオンメニューの中で元々表示されているテキストを書くためのタグになります。

このsummaryタグを使っただけではテキストの前に『▶』がある程度で、普通のテキストと変わりないかと思いますが、これからの記述で、アコーディオンメニューを完成させていきます。

『▶』はsummaryタグを使うと出てくるものですが、ここをクリックすることで、隠れているテキストを表示させることが出来ます。

それではここから隠れているテキストを記述する方法を解説していきます。

元々表示されているテキストを記述した後は元々隠されているテキストを記述していきます。

下記のコードを見てください。

<details>
  <summary>元々表示されているテキスト</summary>
  <p>元々隠されているテキスト</p>
</details>

pタグで『元々隠されているテキスト』というテキストを追記しました。

また、上記画像は元々表示されているテキストをクリックし、展開した後のものになります。展開前は先に掲載した元々表示されているテキストだけが表示されている状態のものです。

元々隠されているテキストは普通のテキストと同様、pタグで記述します。また、ここにリンクを入れたい時にはaタグを使い、リンクを挿入します。

このことから分かる通り、元々隠されているテキストは普段のHTMLの記述に則って、detailsタグ内に記述することでサイトに反映されます。

今回はHTMLだけを使用してQ&Aなどで使われるアコーディオンメニューの作り方について解説してきました。

Q&Aなどでは頻出の機能ですので、この記事を参考にあなたのアコーディオンメニューを作ってみて下さい。