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

2015年1月14日2016年9月8日

この記事は最終更新日から9年経過しています。内容が古い可能性があります。

よくある質問、などで「タイトルをクリックすると詳細を表示する」という仕組みがあります。ちょっとこういう表現をしたいなと思って調べてみました。最終的には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>

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

こんな感じです。見やすくなるようにちょっとだけCSSで色などを指定しています。この例のように３つぐらいだといいのですが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（回答）部分が見えている状態だったら、隠す
ということをを指定しています。