details / summary で作る排他的に開閉するアコーディオン

お手軽にアコーディオンを作ることができる details / summary タグ

details タグと summary タグを使って以下のような HTML コードを書くと、お手軽にアコーディオン動作する FAQ を作ることができます。

<details>
  <summary>決められた曜日・時間に毎週通わなくてもよいのですか？</summary>
  <p>はい。受講される方一人ひとりのご都合に合うように受講日程を相談させていただきます。曜日・時間は週によって違ってもOKですし、通わない週があってもOKです。</p>
</details>

<details>
  <summary>最初に4時間の予約が必要ですか？</summary>
  <p>原則的に事前に4時間分を予約していただきます。事前予約が難しい場合はその都度のご予約も可能ですが、余った時間は翌月に繰り越しできません。</p>
</details>

<details>
  <summary>夕方以降や土日・祝日に受講することはできますか？</summary>
  <p>原則的に平日の9:00～17:00の間でご受講いただきますが、17:00以降および土日・祝日も受講可能な場合がございます。詳しくはお問合せください。</p>
</details>

上記の HTML により以下のようなアコーディオンが出力されます。

決められた曜日・時間に毎週通わなくてもよいのですか？

はい。受講される方一人ひとりのご都合に合うように受講日程を相談させていただきます。曜日・時間は週によって違ってもOKですし、通わない週があってもOKです。

最初に4時間の予約が必要ですか？

原則的に事前に4時間分を予約していただきます。事前予約が難しい場合はその都度のご予約も可能ですが、余った時間は翌月に繰り越しできません。

夕方以降や土日・祝日に受講することはできますか？

原則的に平日の9:00～17:00の間でご受講いただきますが、17:00以降および土日・祝日も受講可能な場合がございます。詳しくはお問合せください。

アコーディオンを排他的に開閉させるには

上記の HTML コードに加えて、下記のようにすべての details タグに同一（この場合 "faq"）の name 属性を指定するだけで、アコーディオンが排他的に開閉する（アコーディオンをどれか開くと、それに連動して、開いているアコーディオンを閉じる）ようになります。

<details name="faq">
  <summary>決められた曜日・時間に毎週通わなくてもよいのですか？</summary>
  <p>はい。受講される方一人ひとりのご都合に合うように受講日程を相談させていただきます。曜日・時間は週によって違ってもOKですし、通わない週があってもOKです。</p>
</details>

<details name="faq">
  <summary>最初に4時間の予約が必要ですか？</summary>
  <p>原則的に事前に4時間分を予約していただきます。事前予約が難しい場合はその都度のご予約も可能ですが、余った時間は翌月に繰り越しできません。</p>
</details>

<details name="faq">
  <summary>夕方以降や土日・祝日に受講することはできますか？</summary>
  <p>原則的に平日の9:00～17:00の間でご受講いただきますが、17:00以降および土日・祝日も受講可能な場合がございます。詳しくはお問合せください。</p>
</details>

上記の HTML により以下のようなアコーディオンが出力されます。

決められた曜日・時間に毎週通わなくてもよいのですか？

はい。受講される方一人ひとりのご都合に合うように受講日程を相談させていただきます。曜日・時間は週によって違ってもOKですし、通わない週があってもOKです。

最初に4時間の予約が必要ですか？

原則的に事前に4時間分を予約していただきます。事前予約が難しい場合はその都度のご予約も可能ですが、余った時間は翌月に繰り越しできません。

夕方以降や土日・祝日に受講することはできますか？

原則的に平日の9:00～17:00の間でご受講いただきますが、17:00以降および土日・祝日も受講可能な場合がございます。詳しくはお問合せください。

CSS でスタイルをカスタマイズ

CSS でスタイルをカスタマイズしてみました。
JavaScript でコーディングしなくてもこのような動きをするアコーディオンを実装できるのって便利ですね。

でも、これってどんなときに役立つの？

と思った方もいらっしゃるでしょう。

お客様にコンテンツの追加変更作業を行っていただくことを考えると、WordPress サイトでこのような FAQ を作るのであれば、

というやり方が現実的で、details / summary が出る幕はなさそうです。

この記事に書いたやり方が役に立つのは、FAQ のボリュームが多くて、アコーディオン動作する FAQ をカスタム投稿タイプで作ってカテゴリー（タクソノミー）やキーワードで検索できるようにしたい場合です。アーカイブページを details / summary を使ってカスタマイズすれば、検索可能で、排他的にアコーディオン動作する FAQ ページを比較的容易に実装できそうです。

関連記事

WordPress コアの詳細ブロックで作る排他的に開閉するアコーディオン

参考にしたページ

これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2025年3月20日スターターパックで前の記事・次の記事のデザインが選べるようになりました
• WordPress2025年3月19日スターターパックのシェアボタンが単色に対応しました
• WordPress2025年3月16日カテゴリーをページヘッダーに表示するプラグインを作りました
• WordPress2025年3月14日カテゴリーとタグを先頭に表示するカスタマイズをプラグイン化しました