アコーディオンを使ってよくある質問を作成

この記事を読むのに必要な時間は約 7 分です。

アコーディオン(Accordion)を使ってよくある質問を作成ということなのですが、そもそもアコーディオン(Accordion)って何?
って方も多いかもしれませんね。
当然のことながら楽器のことではないのですよ。
アコーディオン(Accordion)とは、楽器のようにリストを開閉するパネルをそう呼んでいます。
大手企業のよくある質問などでは質問だけが並んでいるのですが、質問をクリックすると回答が表示される仕組みになっています。

 

目 次

アコーディオンを使った事例

アコーディオン事例

アコーディオンは、よくある質問やスマホでのメニュー・問題などの問と答えなどに使われることが多い手法です。クリックしたら開いてもう一度クリックしたら閉じるのが一般的です。

 

プラグインなしでアコーディオン実装

アコーディオンを設置する方法としてはプラグインなしでも何通りかの方法があります。ただ、そのために必要な基礎知識も必要なのですが・・・
必要な基礎知識は、HTMLとCSS(スタイルシート)・JavaScriptなどの知識が必要です。
サルワカ  さんが興味深い方法を書かれていましたが・・・

[blogcard url="https://saruwakakun.com/html-css/reference/accordion"]

Bootstrapでアコーディオンを簡単に実装する

幸いくまはちLABで使用しているWordPressの無料テーマLightning  には、[simple_tooltip content='BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されている。']Bootstrap[/simple_tooltip]が元々実装されているのでHTMLとCSSだけでもアコーディオンが簡単に設置できます。

Type A

お仕事していただける地域については?
日本国内日本語の通じることとZOOMが使えることが条件になります。対面で打ち合わせが必要な場合は、基本的に阪神間というように決めさせていただいてます。
HTML
CSS(スタイルシート)

Type AのHTML記述方法とCSS(スタイルシート)の一例です。アコーディオンの記述には、リストタグであるdlタグが使われていることが多いようです。


Type B

サポートについてどこまでしていただけますか?
サポートについては、基本的に保守契約をいただいてるお客様になります。保守契約のないお客様については、弊社のWEBサイトなどで操作方法などを見てご自身の自己責任の中で操作してください。保守契約については、サイトの規模によっても変更になりますので別途見積もりをさせていただきます。
HTML
CSS(スタイルシート)

Type Aと違ってdata-targetを使わずにhrefを使っているところの違いですが、Type Bのリンクのようにしている方がわかりやすいかもしれませんね。うまくいかない時は、idが重複していないか確認してください。

jQueryでアコーディオン実装

jQuery

[simple_tooltip content='jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。']jQuery[/simple_tooltip]を使った実装方法もあります。

しかし、[simple_tooltip content='jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。']jQuery[/simple_tooltip]2.1.4との相性が悪いのかくまはちLABで使用しているLightning  では動作しません。 Sento  では、動作していたことを確認しています。
[simple_tooltip content='jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。']jQuery[/simple_tooltip]での実装には、バージョンによる干渉などの問題で動かないと言うリスクがつきまとうことを知っておいてください。
詳しい方法は、下記のサイトで紹介されています。

[blogcard url="https://syncer.jp/accordion-content"]

続きを読む

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!

[vkExUnit_ad area=after]