htmlでタイトルをクリックすると詳細を表示する方法

Image [3]

よくある質問、などで「タイトルをクリックすると詳細を表示する」という仕組みがあります。ちょっとこういう表現をしたいなと思って調べてみました。最終的にはWordPressのコンテンツでそのような表現をしたいですが、まずはどのような仕組みでそれが実現するのかを通常のhtmlで試しました。

仮想Q&A集を作る

テストをするために仮想でQ&A集を作ります(といってもこれから実際にQ&Aとして8Beatサイトに掲載したいなと思っている内容なのですが(^_^;)。
タイトルがあって、詳細があるという表現をするのに htmlタグのDL が向いていると思いますのでそれを使います。

★HTMLタグリファレンス <DL>・・・・・定義リストであることを表す

こちらのページを参照しました。意味は、

<DL>はDefinition Listの略で、<DL>~</DL>の範囲が定義リストであることを表します。 定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。 <DT>~</DT>に定義する用語を記述し、

にその用語の説明を記述します。 これら定義語と定義説明のセットは<DL>~</DL>の中に複数並べることができます。

このようなタグなのでQ&Aにするにはぴったりです。ソースを

このように書きました。表示すると、

Image

こんな感じです。見やすくなるようにちょっとだけCSSで色などを指定しています。この例のように3つぐらいだといいのですがQ&Aの場合、どんどん増えることが予測されますので、最初はタイトルだけ表示されていてクリックしたときに回答が見えるということにしたいと思います。

JQueryを読み込む

どこかにサンプルはないかな?と検索して

WP/ 記事タイトルをクリックさせて中身を表示

この記事をみつけしました。多少変更したところもありますが、この仕組みを利用してみました。

この仕組みにはJQueryを使いますので読み込みます。</head>の前に、

この行を追加します。これでこのhtmlでJQueryが利用できるようになります。

その行の後に、

このコードを挿入します。さらにこのJQueryで動くように要素にclassを指定します。全てを追加したソースが

こんな感じになります。

ここでやっているのはまず最初に accordionLister というclassにあるdd(回答)部分を見えなくします(.hide)
そして、showExcerptというclassの要素(この場合はdtでタイトルのdt)をクリックしたら、
そのdt(タイトル)に対するdd(回答)部分が見えていない状態だったら、見せる
そのdt(タイトル)に対するdd(回答)部分が見えている状態だったら、隠す
ということをを指定しています。

実際の動きを確認する

Image [1]

この状態で表示すると最初にタイトルだけが表示されます。

Image [2]

2つめのタイトルをクリックすると2つめのタイトルに対応する回答が表示されます。このタイトルを再度クリックするとこの回答は隠れます

実際にこのコードをサーバーに置いてみましたので、こちらからご確認ください。

これで閉じたり開いたりするところが完成したので、今度はWordPressでこれを実現したいと思います(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る