【jQuery】特定の行数以上で「続きを読む」ボタンを表示させる方法

2020-04-08

今回はjQueryを使用して、特定の行数以上で「続きを読む」ボタンを設置する方法について、紹介していきます。

ボタンを押す素振りをする女の子

使用するケース

長いテキストを特定の行で区切り、サイトを見やすくするために使われます。

今回説明する機能の仕様

・初期状態では特定の行までを表示させ、それより後の行を非表示にする
・非表示になっている行がある場合は「続きを読む」のボタンが表示される
・「続きを読む」のボタンを押すと、非表示だった行が表示され、ボタンは非表示になる

サンプル

こちらをご覧ください。※別タブで開きます

作成方法

jQueryを使って実装していきます。

※jQueryを使うための準備については、下記よりご確認ください。

まずHTMLについて、該当部分は下記のようになっています。

<div class="text-wrap">
  <p class="text">じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけじゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけじゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけじゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけ</p>
  <p class="readmore-btn"><a href="">続きを読む</a></p>
</div>

「続きを読む」で区切りたい文章のまとまりである「p」に「text」というクラスをつけて区別します。
※「text」は各自で分かりやすいクラス名にしてしまってOKです

その下に「続きを読む」ボタンを「p」に内包する形で「a」タグを使用して設置します。

CSSについては下記のように設定を行います。

.text-wrap {
      background-color: #fff;
      width: 600px;
      height: auto;
      margin: 0 auto;
      border: 1px solid #000;
      padding-right: 20px;
      padding-left: 20px;
      text-align: left;
    }

.text {
      line-height: 24px;
      overflow: hidden;
    }
.readmore-btn {
      text-align: right;
      display: none;
    }

「text-wrap」についてはあくまで見た目上の例となり、詳しい説明は省略しますが、枠(border)が設置されていることが一般的です。

「text」の部分について、1行の高さを指定する「line-height」は必ず記載しておく必要があります。
初期状態で表示させる「text」の高さを計算するために必要な数値になるからです。
また、「overflow-hidden」を指定することで、余分なテキストが初期状態で非表示になります。

「readmore-btn」について、大抵の場合は範囲内の右側に配置されるので上記でも「text-align: right」を指定しています(機能自体には影響ありません)。
「display: none」の指定は必須です。
「text」の行の数が、非表示の処理が開始される行よりも少なければ「続きを読む」ボタンは表示させる必要がないので、そのパターン分けのために基本はCSSで非表示にしておきます。

そしてjQueryの記述は下記のようになります。

$(function() {
      var textHeight = $('.text').height(),
        lineHeight = parseFloat($('.text').css('line-height')),
        lineNum = 4,
        textNewHeight = lineHeight * lineNum;
      if (textHeight > textNewHeight) {
        $('.text').css('height', textNewHeight);
        $('.readmore-btn').show();
        $('.readmore-btn').click(function() {
          $(this).hide();
          $('.text').css('height', textHeight);
          return false
        });
      };
    });

まず変数の説明ですが、それぞれ
「textHeight」・・・ 自然に計算されるブロック要素 「text」 の高さ
「lineHeight」・・・「text」の1行の高さ
「lineNum」・・・初期状態で表示させる行数(任意で指定)
「textNewHeight」・・・初期状態で表示させてもよい「text」の高さ
という内容になります。

「lineHeight」 の部分について、「$('.text’).css('line-height’)」のみの記述では結果が「○○px」という文字列になり計算が出来なくなるので、「parseFloat()」という命令を使い「px」を除去した数値に置き換えています。

「textNewHeight」 では、「lineHeight」と「lineNum」を掛けることで、初期状態で表示させてもよい「text」の高さが求められます。
もし「lineHeight」が「24px」で「lineNum」が「4」であれば、「text」は初期状態で「96px」まで表示させてもよいことになります。

「if (textHeight > textNewHeight) {~}」 の部分では、「もし自然に計算されるブロック要素「text」の高さが、初期状態で表示させてもよい「text」の高さを超えた場合、{}内の処理を行う」といった場合分けをするように命令しています。

「$('.text’).css('height’, textNewHeight);」は、「text」の高さを自然に計算されたものではなく、初期状態で表示させてもよいだけの高さに設定し直す内容の命令です。

「$('.readmore-btn’).show();」は、「続きを見る」のボタンを表示させるという内容の命令です。

「$('.readmore-btn’).click(function() {~}」では、ボタンを押した際に{}内の処理を行うように命令しています。

「$(this).hide();」でボタンが消え、
「$('.text’).css('height’, textHeight);」で「text」の高さを自然に計算された本来の高さに戻す、つまり非表示だったテキストを表示させるという内容の命令になります。

最後に「return false」を添えて「a」のリンク先を無力化して完成です。

以上となります。