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 でコーディングしなくてもこのような動きをするアコーディオンを実装できるのって便利ですね。
決められた曜日・時間に毎週通わなくてもよいのですか？
はい。受講される方一人ひとりのご都合に合うように受講日程を相談させていただきます。曜日・時間は週によって違ってもOKですし、通わない週があってもOKです。
最初に4時間の予約が必要ですか？
原則的に事前に4時間分を予約していただきます。事前予約が難しい場合はその都度のご予約も可能ですが、余った時間は翌月に繰り越しできません。
夕方以降や土日・祝日に受講することはできますか？
原則的に平日の9:00～17:00の間でご受講いただきますが、17:00以降および土日・祝日も受講可能な場合がございます。詳しくはお問合せください。
でも、これってどんなときに役立つの？
と思った方もいるでしょう。
たしかに、いまどきの WordPress サイトでこのような FAQ を作るのであれば、
- VK Blocks の FAQ ブロックを使って FAQ を作る。
- JavaScript で排他的に開閉するようにコーディングする。
というやり方が（コンテンツの追加変更作業を考えると）はるかに楽で、details / summary が出る幕はなさそうです。
この記事に書いたやり方が役に立つのは、FAQ のボリュームが多くて、アコーディオン動作する FAQ をカスタム投稿タイプで作ってカテゴリー（タクソノミー）やキーワードで検索できるようにしたい場合です。Lightning のアーカイブページを details / summary を使ってカスタマイズすれば、検索可能で、排他的にアコーディオン動作する FAQ ページを比較的容易に実装できそうです。
そのうちに作ってみようかなぁ…
2024.3.11 作ってみました😄
Lightning で details / summary をフックで出力することができませんでしたが、JavaScript で開閉するアコーディオンを実装しました。
参考にしたページ
サイト運営者プロフィール
- 魚沼情報サービス (新潟県南魚沼市)
-
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
» ご相談・お問い合わせはこちらからどうぞ
WordPress サイト制作・カスタマイズ・サポートを承ります
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。
デザイナー様・制作業者様のお手伝いも数多く行っております。難しい部分のコーディングをやってほしい、いま人手が足りない、等々... お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきます。
