スマホサイトで「more」をクリックすると、続きの文章が出るにはどうしたら

Question

スマホサイトを作成中です。
説明文が長くどうにか短く表示させたいです。

最初の1～2行を表示して「More」や「続きを読む」をタップするとスルスルと続きの文章が読める物をどこかで見た事があるのですが、これはどのようにして作っているのでしょうか?

Answer 1

こんにちは。

いろいろな方法がありますが、簡単な方法ではjQueryで読み込み、

$(function () {
    $('.button').prevAll().hide();
    $('.button').click(function () {
        if ($(this).prevAll().is(':hidden')) {
            $(this).prevAll().slideDown();
            $(this).text('閉じる').addClass('close');
        } else {
            $(this).prevAll().slideUp();
            $(this).text('続きを読む').removeClass('close');
        }
    });
});

<p>
	下の「続きを読む」をクリックすると続きの文章が表示されます。<br>
	ここには最初に表示させる文章を入れます。
</p>
<div class="content">
    <p>
    	こちらには「続きを読む」をクリックすると表示させる文章を入れます。
    </p>
    <p class="button">続きを読む</p>
</div>

PCでもスマホでも動作します。

上記の場合クリックすると一気に中身を全て表示しますが、段階的に表示させたい場合は
こちらのサイトを御参考下さい。

Comments

[terataka]

素早い返答ありがとうございます。

そのままコピペしてみたのですが、動作しませんでした。
自分でも検索していたら以下のページを見つけました。
http://blog.tapjockey.com/?eid=11
こちらはコピペで動作しました。
しかし、回答していただいた「続きを読むボタンが閉じるボタンになる」と言うのはとても魅力的で、これをどうにか追加したいのですが、方法が良く分かりません。
よければその方法も教えてください。

[terataka]

申し訳ないです。
私のコピペミスでした!
(JavaScriptをコピペしたら、最上部の"JavaScript"もコピーされてました。)
修正したら、無事動作しました。

[terataka]

動作したので安心していたのですが…

続き・閉じるボタンがテキストですよね。
これに装飾用タグを追加したいのですが、どのようにしたら良いですか?

素人考えで、
<p class="button"><span class="bot">続きを読む</span></p>
としてみたら、閉じるボタンと1回閉じた後の続きを読むボタンに<span>が追加されませんでした。
なので、　jqueryの方に
$(this).text('<span class="bot">閉じる</span>').addClass('close');
としてみると、タグごと表示されてしまいました。
この場合、どのようにしたら良いでしょうか?

[yamato_hikawa]

HTML上の構成を
<p class="button"><span class="bot">続きを読む</span></p>
とした上で、該当箇所をそれぞれ

$(this).children().text('閉じる').addClass('close');

$(this).children().text('続きを読む').removeClass('close');

に書き換えればとりあえず動きます。

[terataka]

ありがとうございます。
無事style適用できました!