【jQuery】要素をグラデーションで隠して開閉するコンテンツの実装

2022/10/27

長い文章をグラデーションで隠して「もっと見る」ボタンをクリックして、続きの文章が表示される実装を紹介します。

サンプルをご覧ください

See the Pen Untitled by RECOOORD (@recooord) on CodePen.

「もっと見る」ボタンをクリックしてみてください。
コンテンツの高さが広がり、グラデーションが消えて、ボタンの文字も「閉じる」に変更されたことが確認できました。
今回はこのような開閉メニューについて解説いたします。

HTMLの記述

<div class="container">
  <p>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</p>
  <button>もっとみる</button>
</div>
<div class="container">
  <p>ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。</p>
  <button>もっと見る</button>
</div>

開閉メニューが設置されるシチュエーションを想定して、複数のコンテンツを用意しました。今回は2つ用意してます。
divタグの.containerのなかには、pタグのテキストと、buttonタグのボタンを設置してます。

CSSの記述

/*高さを制限しているコンテンツの要素*/
.container{
  position: relative;
  max-width: 500px;
  height: 200px;
  padding: 20px 20px 80px;
  margin: 20px auto;
  border: 1px solid #000;
  overflow: hidden;
  transition: .4s;
  box-sizing: border-box;
}
/*グラデーションで隠す擬似要素*/
.container:before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
  transition: .4s;
}
/*クラス付与時のスタイル*/
.container.active:before{
  opacity: 0;
  visibility: hidden;
}
/*テキストのスタイル*/
p{
  font-size: 16px;
  line-height: 1.8;
}
/*ボタンのスタイル*/
button{
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 100px;
  height: 40px;
  cursor: pointer;
  color: #fff;
  background: #000;
  border: none;
}

.containerに高さを指定して、はみ出した要素は「overflow: hidden;」で隠れるようにしています。
このコンテンツに擬似要素でグラデーションを作成してます。

後でjQueryで.containerに「.active」というクラスを付与してグラデーションを消すので、擬似要素に「opacity: 0;」と「visibility: hidden;」を入れています。

jQueryの記述

$(function(){
  $('button').on('click',function(){
    //クリックしたボタンの親要素にクラスを付与
    const target = $(this).closest('.container');
    target.toggleClass('active');
    //クラスの有無で条件分岐
    if(target.hasClass('active')){
      //スクロール領域も含めた高さを取得・付与する
      const height = target.get(0).scrollHeight;
      target.css('height',height);
      //テキストを変更する
      $(this).text('閉じる')
    }else{
      //高さを戻す
      target.css('height','');
      //テキストを戻す
      $(this).text('もっと見る');
    }
  });
});

複数の開閉メニューがあることを考慮して、ボタンをクリックしたときに、このボタンの親要素のボックスを変数「target」に格納します。
それから「.active」クラスを付与して、クラスの有無で条件分岐をします。

クラスが有る場合はコンテンツの高さを広げてボタンのテキストを変更し、クラスが無い場合はコンテンツの高さとボタンのテキストを戻すようにしてます。

またコンテンツの高さを取得する場合は「get(0).scrollHeight」と記述することで、スクロール領域も含めた高さを取得することができます。