[もっとみる...] / [See more...] をjQueryで実装する(開閉できるタイプ)

欲しいもの

これはサンプルテキスト、これはサンプルテキストでサンプルなの。 これはサンプルテキスト、これはサンプルテキス …more

↓moreをクリックすると↓

これはサンプルテキスト、これはサンプルテキストでサンプルなの。 これはサンプルテキスト、これはサンプルテキストでサンプルなの。 これはサンプルテキスト、これはサンプルテキストでサンプルなの。 閉じる

こんなやつ。

CSSだと文字を切って非表示にはできるけど、開閉はできない。
jQueryも文字を切るだけのものはよくあるけど、開けたり閉めたりする参考はあんまりなかった。

で考えてみたら、切るのは確かに簡単だ。
でも切ってしまったら、moreで全文を見る方法がない。

[googlead]

解決法

テキストを2つに分けます。
こんな感じ。

これはサンプルテキスト、これはサンプルテキストでサンプルなの。 これはサンプルテキスト、これはサンプルテキストでサンプルなの。 これはサンプルテキスト、これはサンプルテキストでサンプルなの。

青字と赤字で文字を分割して、デフォルトでは赤字を隠しておく。
moreがクリックされたら赤字を表示する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="more">
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
これはサンプルテキスト、これはサンプルテキストでサンプルなの。
</div>
<style>
.morecontent span {
    display: none;
}
</style>
<script>
$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
</script>

テキストだけを開閉するにはこれでOK。

実装

自分がやりたかったのは色んな要素の開閉を一度したり、
英語と日本語で文字数を変えたりで、
もうちょっと複雑になったけど基本は同じ。
 ↓
こちらに実装してみました。
https://acomoo.com/publics/view_flat/3

Screen Shot 2013-06-15 at 5.53.06 PM

参考サイト

http://black-flag.net/jquery/20121010-4227.html
Dynamically Shortened Text With “Show More” Link Using JQuery

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた