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

続きを読むボタンをクリックしたら残りの文章が表示されるように出来る？

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

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

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

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

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

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

コード解説

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

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

以上になります。