コピペでできる！アコーディオンパネルの作り方

コンテンツを折りたためる「アコーディオンパネル」の作り方をお伝えします。

アコーディオンパネルとは、見出しをクリックすることで、コンテンツが開いたり閉じたりするパネルのことです。

このアコーディオンパネルは、「よくある質問」の箇所でよく使われます。

「よくある質問」の見出しをクリックすることで、質問の答えが表示されるという形ですね。

コピペのみでできる簡単な実現方法をお伝えするので、良かったら活用してください。

■ このようなアコーディオンパネルが完成します！

下記の見出し（よくある質問）をクリックすると、質問に対する答えの文章が表示されます。

ここでは、このようなアコーディオンパネルを作る方法をお伝えします。

Q. ホームページも作ってもらえますか？

Q. 契約期間などはありますか？

Q. 小さなお願いも受けていただけますか？

■ コンテンツを折りたためる「アコーディオンパネル」の作り方の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：アコーディオンパネルを表示したい箇所に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、HTMLファイルに貼り付けてください。

アコーディオンパネルを表示したい箇所に、上記のソースを入れます。

なお、見出しの文章は自由に変更することができますし、答えの文章も自由に変更することができます。

手順３：見出しをクリックして、隠れているコンテンツが表示されることを確認する。

ホームページの表示を確認して、下記のような「アコーディオンパネル」が表示されていることを確認してください。

また、見出しをクリックして、隠れているコンテンツが表示されることも確認できれば、作業は完了です。

Q. ホームページも作ってもらえますか？

Q. 契約期間などはありますか？

Q. 小さなお願いも受けていただけますか？

■ 【カスタマイズ方法】アコーディオンパネルの項目を増やす方法

アコーディオンパネルの項目を増やすには、HTMLファイルに入れた記述の中に、下記のソースを追加するだけです。

<dl class="faq-section">
<dt class="question">Q. 小さなお願いも受けていただけますか？<span class="open-btn" aria-label="開く"></span></dt>
<div class="answer">
はい、「ホームページのこの箇所がうまく表示されなくて困っている」や「ホームページのこの箇所をこうしたい」などでも大丈夫です。
</div>
</dl>

こうすることで、アコーディオンパネルの項目を増やすことができます。

なお、すでにある箇所をコピーして貼り付ける（項目を増やす）と、分かりやすいと思いますよ。

■ 【カスタマイズ方法】アコーディオンパネルの色を変更する方法

アコーディオンパネルの色は、CSSファイル（style.css）に入れた記述を修正することで、色を変えることができます。

たとえば、「faq-section」の中にある「background: #ffffff;」の箇所を、「background: #33ff33;」などに変更することで、見出しの色を変えることができますよ。

また、「answer」の中にある「background: #f3f3f3;」の箇所を、「background: #b2ffb2;」などに変更することで、アコーディオンパネルを開いたときの背景の色を変更できます。