Web制作 jQuery

【jQuery】続きを読むボタンクリックで要素を開く方法【閉じるボタンあり】

【jQuery】続きを読むボタンクリックで要素を開く方法【閉じるボタンあり】
続きを読むボタンをクリックしたら残りの文章が表示されるように出来る?

長い文章のテキストボックスでは最初に数行だけ表示して残りは隠し、続きを読むボタンをクリックしたら残りを表示させる、という実装があります。

これは実務でも何度か使用したことがあるので、頻出するわけではありませんが覚えておいて損はないと思います。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


続きを読むボタンクリックで要素を開く方法【閉じるボタンあり】

今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

それでは最初にサンプルを見てみましょう。

See the Pen
続きを読むボタンをクリックでテキストエリアを開く
by junpei (@junpei-sugiyama)
on CodePen.

文字の下の方はグラデーションで隠していて、ボタンクリックで文字が全て表示されボタンの表示が『続きを見る』から『閉じる』に変わります。

 

コード解説

それではコードの解説をします。

HTMLはこちら。

<div class="accordion">
  <!-- ボタン -->
  <span class="accordion-btn js-accordion-btn"></span>
  <div class="accordion-text js-accordion-text">
    <p>テキストが入ります。</p>
  </div>
</div>

サンプルを見るとボタンはテキストの下に書きたいかも知れませんが、下に書くと正常に動かないのでご注意ください。

CSSはこちらです。

.accordion {
  position: relative;
}
/* ボタン */
.accordion-btn {
  background-color: #6495ed;
  border: 1px solid #6495ed;
  bottom: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  left: 0;
  margin: auto;
  padding: 5px 15px;
  position: absolute;
  right: 0;
  text-align: center;
  transition: all .2s;
  width: fit-content;
  z-index: 1;
}
/* 続きを読むボタンの表記 */
.accordion-btn::after {
  content: "続きを読む";
}
/* ボタンhover時のスタイル */
.accordion-btn:hover {
  background-color: #fff;
  color: #6495ed;
}
.accordion-text {
  overflow: hidden; /* テキストを隠す */
  position: relative;
}
/* 最初に見えてるテキストエリアの高さ */
.accordion-text.is-hide {
  height: 100px;
}
/* テキストをグラデーションで隠す */
.accordion-text::before {
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.9) 50%, #fff 100%);
  background:         linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.9) 50%, #fff 100%);
  bottom: 0;
  content: "";
  height: 60px; /* グラデーションで隠す高さ */
  position: absolute;
  width: 100%;
}
/* 閉じるボタンの位置 */
.accordion-btn.is-show {
  bottom: -3em;
}
/* 閉じるボタンの表記 */
.accordion-btn.is-show::after {
  content: "閉じる";
}
/* 続きを見るボタンをクリックしたらテキストを隠しているグラデーションを消す */
.accordion-btn.is-show + .accordion-text::before {
  display: none;
}

レイアウトの為のCSSは割愛しました。

説明はコメントアウトに書いているので、デザインに合わせて変更して下さい。

最後にjQueryです。

const itemHeights = [];
let returnHeight;

$(function () {
  $(".js-accordion-text").each(function () {
    // 隠す要素
    const thisHeight = $(this).height(); // 隠す要素の高さを取得
    itemHeights.push(thisHeight); // それぞれの高さを配列に入れる
    $(this).addClass("is-hide"); // CSSで指定した高さにする(見えてる高さ)
    returnHeight = $(this).height(); // 見えてる高さを取得
  });
});

$(".js-accordion-btn").click(function () {
  // ボタンをクリックしたら
  if (!$(this).hasClass("is-show")) {
    const index = $(this).index(".js-accordion-btn");
    const addHeight = itemHeights[index]; // 要素の高さを取得
    $(this)
      .addClass("is-show") // 閉じるボタンに表示変更
      .next()
      .animate({ height: addHeight }, 300) // 隠されてる要素をアニメーションで表示
  } else {
    $(this)
      .removeClass("is-show") // 閉じるボタン表示解除
      .next()
      .animate({ height: returnHeight }, 300) // 要素を初期の高さにアニメーションで戻す
  }
});

.animateの数字を変えることでアニメーションの時間を変更できます。

あとはclass名以外変更する箇所はないので、このままコピペして貰えれば大丈夫です。

以上になります。

あわせて読む
【jQuery】もっと見るボタンクリックで指定した件数ずつ表示させる方法【サンプル付きで解説】
【jQuery】もっと見るボタンクリックで指定した件数ずつ表示させる方法【サンプル付きで解説】

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
740部以上販売し、レビューは410件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高9万PV▶︎Twitterのフォロワーは6300人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計750部&450万円突破

-Web制作, jQuery