「うざい、絶滅して欲しい、不快感を感じる」続きを読むボタンをCSSとjQueryで作る方法

続きを読むボタンをCSSとjQueryで作る方法

こんにちは。

ゆうや(@yuyaphotograph)です!

本記事では、続きを読むボタンをCSSとjQueryで作る方法をご紹介します。

MEMO
続きを読むボタンとは、長い文章をある一定の高さで制限して非表示にし、「続きを読む」や「もっとみる」ボタンを押すと残りの文章が表示されるというやつです。

ニュースアプリなどでよく目にするUIですが、ユーザーからは「続きを読む うざい」とたくさん検索されるほど忌み嫌われている機能となっております。

そんな「絶滅して欲しい」(ぼくも正直好きくないです)と超不人気な「続きを読む」ボタンを今回は作っていきます。

それでは参りましょう。

CSSとjQueryで続きを読むボタンを作ろう!

完成イメージ

今回実装する「続きを読む」ボタンの完成イメージはこちら!

■「続きを読む」ボタン表示のとき

続きを読むボタンサンプル

続きを読むを押すと隠されている文章が表示されます

■「続きを読む」ボタンを押した後

続きを読むボタンサンプル

閉じるを押すと初期状態に戻ります

実装のポイント

今回の実装のポイントは、

  • 文章要素の高さが指定値を超えている場合にisHiddenクラス付与で「続きを読む」ボタン表示
  • 元の文章をhtmlメソッドを使用し変数に代入しておく
  • lengthプロパティで文章の長さを取得して変数に代入しておく
  • 「続きを読む」表示の時の文章はreplaceメソッドで改行タグ(br)を半角スペース(u00a0)に置換する
  • 「続きを読む」表示の時の文章はsubstringメソッドで任意の文字数までを取り出して表示する
  • 「閉じる」を押したら戻す

となります。

ソースコードとともに確認していきましょう。

HTML構造を確認

index.html
<div class="Card">
  <div class="Card-Item">
    <div class="Card-Item-Comment">
      <div class="Card-Item-Comment-Text">
        テキストが入ります
      </div>
    </div>
  </div>
  <div class="Card-Item">
    <div class="Card-Item-Comment">
      <div class="Card-Item-Comment-Text">
        テキストが入ります
      </div>
    </div>
  </div>
</div>

.Card-Item-Comment-Textが今回、「続きを読む」ボタンを追加していく要素となります。

ご覧の通り、.Card-Itemが一塊でループを想定しています。

スクリプト開始

ループ要素なので、このようにスクリプトを開始します。

script.js
$('.Card-Item-Comment-Text').each(function(e){ 
  この中に処理を書いていく
  });

元の文章を変数に代入、lengthプロパティで長さ取得

script.js
let $comment = $(this);
  // 元の文章を変数に格納
  let comment = $comment.html();
  let length = comment.length;
  let commentShow;
  let commentText;

指定値を超えていたら「続きを読む」ボタン表示、「閉じる」ボタン押したら元に戻す

一気にいきます。長文失礼します。

script.js
if($comment.height() > 100){
    // 文章の要素の高さが100を超えていたら隠す用のisHiddenクラスを付与
    $comment.addClass('isHidden');
    
    // ウィンドウ幅が768px以上の時の処理(PC表示)
    if (window.matchMedia('(min-width: 768px)').matches) {
      commentShow = comment.replace(/
/g, "u00a0").substring(0, 86);
      commentText = commentShow += '' + '...続きを読む' + '';
      $comment.html(commentText);
    } else { // ウィンドウ幅が768px以下の時の処理(スマホ表示)
      commentShow = comment.replace(/
/g, "u00a0").substring(0, 68);
      commentText = commentShow += '' + '...続きを読む' + '';
      $comment.html(commentText);
    }
    // 続きを読むをクリックで元の文章を表示
    $comment.on('click', '.Card-Item-Comment-Text-More', function(e){
      let $anchor = $(e.currentTarget);
      let $anchorParent = $anchor.parent();
      $anchorParent.removeClass('isHidden');
      $anchorParent.html(''); // 一旦空にする
      $anchorParent.html(comment).append('' + '閉じる' + '');
      // 閉じるをクリックで元に戻す
      $('.Card-Item-Comment-Text-Hide').on('click', function(e){
        let $anchorHide = $(e.currentTarget).parent();
        $anchorHide.addClass('isHidden');
        $anchorHide.html('');
        $anchorHide.html(commentText);
      });
    });
  }

文章要素や「続きを読む」「閉じる」ボタンのスタイリング

height: auto、overflow-y:hiddenが肝です。

index.css
.Card-Item-Comment-Text{
  position: relative;
  height: auto;
  line-height: 1.8;
  font-size: 14px;
}
.Card-Item-Comment-Text.isHidden{
  overflow-y:hidden;
}
.Card-Item-Comment-Text-Hide{
  display: block;
  line-height: 1.8;
  text-align: right;
}
.Card-Item-Comment-Text-More,
.Card-Item-Comment-Text-Hide{
  cursor: pointer;
}

「続きを読む」ボタンのサンプルコード

ここまでお付き合いいただきありがとうございます!笑

CodePenでサンプルを作ったのでご覧になって下さいまし(^o^)

↓↓↓

See the Pen
mdypOEj
by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、続きを読むボタンをCSSとjQueryで作る方法をご紹介しました。

業務で実装する機会があったので調べて当初はCSSだけで実装する方法でやってました。

しかし、その方法だとどうも改行が入った際に納得のいく動作にならなかったので再度調べなおしjQueryでクローンを作って実装する今回ご紹介した内容となりました。

「やっとできた!は やればできるを教えてくれる」という広告コピーを実感した実装でした。

最後までご高覧いただきありがとうございました!