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

この記事は約10分で読めます。

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にするにはぴったりです。ソースを

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
        dl {
            width:700px;
        }
        dt {
            font-weight:bold;
            background-color:#ffc0cb;
            margin-top:10px;
            padding:5px;
        }
        dd {
            background-color:#ffffe0;
            margin-left:0px;
            padding:5px;
        }
        </style>

    </head>
    <body>
        <div style="margin-left:100px;">
        <dl>
            <dt>イベントをしたいと思っていますが、何人でいくらになりますか?</dt>
            <dd>
            イベントに関する料金はイベントが有料・無料にかかわらず通常のドロップイン料金となります。ご利用人数×ご利用金額=お支払額となります。
            </dd>
        </dl>
        <dl>
            <dt>2時間料金で入って結果的に5時間いた場合はいくら払えばいいですか?</dt>
            <dd>
            2時間料金が500円で延長料金は1時間につき200円となっています。4時間で900円となりますが5時間以上の場合は1000円となりますので差額の500円をお支払いいただくだけで1日利用することができます。ドロップイン料金は最大1000円となっておりますので、お気軽にご利用ください。
            </dd>
        </dl>
        <dl>
            <dt>イベント中はドロップインなどで利用できませんか?</dt>
            <dd>
            8Beatでは営業時間中に貸し切りのイベントは行いませんので必ずドロップインや月額会員様がご利用できる席を準備してあります。営業時間中はいつでもご安心してお越しください。
            </dd>
        </dl>
        </div>
    </body>
</html>

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

Image

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

JQueryを読み込む

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

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

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

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

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

その行の後に、

        <script type="text/javascript">
        jQuery(function($){
            $('.accordionLister dd').hide();
            $(function(){
                $('.showExcerpt').on('click', function() {
                    if($(this).parent().find('dd').css('display') == 'none'){
                        $(this).parent().find('dd').show();
                    } else {
                        $(this).parent().find('dd').hide();
                    }
              });
            });

        });
        </script>

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

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
        dl {
            width:700px;
        }
        dt {
            font-weight:bold;
            background-color:#ffc0cb;
            margin-top:10px;
            padding:5px;
        }
        dd {
            background-color:#ffffe0;
            margin-left:0px;
            padding:5px;
        }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
        jQuery(function($){
            $('.accordionLister dd').hide();
            $(function(){
                $('.showExcerpt').on('click', function() {
                    if($(this).parent().find('dd').css('display') == 'none'){
                        $(this).parent().find('dd').show();
                    } else {
                        $(this).parent().find('dd').hide();
                    }
              });
            });

        });
        </script>
    </head>
    <body>
        <div style="margin-left:100px;">
        <dl class="accordionLister">
            <dt class="showExcerpt">イベントをしたいと思っていますが、何人でいくらになりますか?</dt>
            <dd>
            イベントに関する料金はイベントが有料・無料にかかわらず通常のドロップイン料金となります。ご利用人数×ご利用金額=お支払額となります。
            </dd>
        </dl>
        <dl class="accordionLister">
            <dt class="showExcerpt">2時間料金で入って結果的に5時間いた場合はいくら払えばいいですか?</dt>
            <dd>
            2時間料金が500円で延長料金は1時間につき200円となっています。4時間で900円となりますが5時間以上の場合は1000円となりますので差額の500円をお支払いいただくだけで1日利用することができます。ドロップイン料金は最大1000円となっておりますので、お気軽にご利用ください。
            </dd>
        </dl>
        <dl class="accordionLister">
            <dt class="showExcerpt">イベント中はドロップインなどで利用できませんか?</dt>
            <dd>
            8Beatでは営業時間中に貸し切りのイベントは行いませんので必ずドロップインや月額会員様がご利用できる席を準備してあります。営業時間中はいつでもご安心してお越しください。
            </dd>
        </dl>
        </div>
    </body>
</html>

こんな感じになります。

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

実際の動きを確認する

Image [1]

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

Image [2]

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

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

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

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

インターネット HTML JQuery
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。