jQuery Web制作 コーディング

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

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

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

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

効率よくコーディングしたい人はこちら

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

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

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

【初めて使う人向け】jQuery本体を読み込む方法

 

最初にデモを見てみましょう。

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名以外変更する箇所はないので、このままコピペして貰えれば大丈夫です。

以上になります。

 

コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約280件(平均スコア

今だけ!5大特典あり🎁

-jQuery, Web制作, コーディング