jQueryを使って続きを見るボタンで
長いコンテンツの表示・非表示を切り替える方法

2023.07.15
2021.06.27

サイトの管理をしていくとどうしてもコンテンツ量が増えていき、特に一覧ページなどを作っていく際、解説テキストが長くなりすぎるなど、全部を表示するには長すぎるけれど一部を表示して続きは見たい人だけクリック・タップで表示したいというケースがあります。

以前に同じような内容を、CSSだけで設定する方法について解説してきましたが、今回はそれをjQueryを使って設定する方法についてまとめてみたいと思います。

CSSだけで長いコンテンツをボタンクリックで続きの表示・非表示を切り替える方法: サイトの制作を終え更新や管理をしていくと、事例集やお客様の声といった立ち上げ当初は少なかったコンテンツが、どんどん増えていき縦長になっていくというケー...

サイトにjQueryを使っているのであれば、jQueryを使った方がよりわかりやすく設定もしやすいと思うので、それぞれのサイトに応じて使い分けなどしてくのも良いのではないでしょうか。

この記事の目次

jQueryを使って実装するためのコード

では、実際に使うコードを見ていきましょう。
以前のCSSだけで設定するよりも、より見た感じでもわかりやすくなります。

<div class="readmore">
  <div class="readmore-content">
    <p>ここにコンテンツ内容を入力します。</p>
  </div>
  <button>続きを見る</button>
</div>

.readmore {
  position: relative;
  margin: 50px auto 0;
  padding: 0px 0px 75px;
}

.readmore-content {
  position: relative;
  height: 200px;
  transition: all .4s;
  overflow: hidden;
}

.readmore-content::before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 75px;
  transition: all .4s;
  background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100% );
}

.readmore-content.is_open:before{
  display: none;
}

.readmore button{
  position: absolute;
  display: table;
  left: 50%;
  bottom: 0px;
  margin: 0 auto;
  width: 200px;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  background-color: #333;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1;
  transition: all .4s;
}

$(function(){
  $('button').on('click',function(){
    const t = $('.readmore-content');
    t.toggleClass('is_open');
    if(t.hasClass('is_open')){
      const h = t.get(0).scrollHeight;
      t.css('height', h);
      $(this).text('元に戻す')
    }else{
      t.css('height','');
      $(this).text('続きを見る');
    }
  });
});

実際に下記からサンプルをご確認いただけます。

デモページ

少しCSSとjQuery用のJavaScriptが長くなりはいますが、よくよく見ていくと、CSSだけで設定するよりも、パッと見て、何がどこに対応してどう動いているのかといった事はわかりやすいのではないかと思います。

jQuery利用の際はコードの順などはどちらでも良い

CSSだけで設定する場合、CSSの間接セレクタを使って設定していたため、同じ階層化にあったとしても、コードの書く順番が決まっていましたが、jQuery版の場合は気にする必要がありません。

上記のサンプルでは、コンテンツ部分を先に記載し、その後に<button>を表示していますが、先に<button>を書いてからコンテンツ部分を書いても全く同じように動作します。

buttonをクリックすると.is_openを付与

jQueryを使って、<button>をクリックした際に.readmore-contentに色々設定を施します。

まず3行目で、const t = $('.readmore-content');として、何度もクラス名を書くとミスに繋がるため、いったんtという変数に入れています。その後の4行目に、buttonをクリックした際に、is_openというクラスを付与しています。

その後は、.readmore-contentにis_openというクラスがあるかないかで、それぞれの処理を書いています。

const h = t.get(0).scrollHeight;
t.css('height', h);
$(this).text('元に戻す')

こうすることで、スクロールする高さを取得し、その高さの値を、.readmore-contentのheightにいれ、<button>のテキストを、元に戻すに変更しています。

t.css('height','');
$(this).text('続きを見る');

こちらは逆に、is_openが付いていない時（元に戻すボタンをクリックした時）の処理になり、先ほど設定したスクロールする高さを元に戻し、テキストも「続きを見る」の元のテキストに戻しています。

実際に使う場合は、ほとんどコピペでHTML、CSS、JavaScriptで使っているクラス名を統一して微調整するだけで使う事ができるはずです。

高さ指定ではなくブロック指定で表示したい場合

上で解説した部分は、長いコンテンツを表示する高さを指定して、それら以外を隠して、ボタンをクリックすることで全てを表示するという見せ方でした。

これとは別に、サイトの作りや構成などによっては、コンテンツのここまでは見せて、ここからは隠してクリックされたら全てを表示といった見せ方をすることもあるかと思います。

特にサイトに載せる事例集や、お客様の声など、コンテンツのレイアウトがはっきりと決まっていて、最初から○件は表示しておき、残りはクリックして表示するというような見せ方の場合は、こちらの使い方で設定ができます。

<div class="readmore2">
  <div class="readmore-show">
    <p>ここは表示されるテキストです。</p>
  </div>

  <div class="readmore-hide">
    <p>ここはボタンをクリックしたら表示されるテキストです。</p>
  </div>
  <button>続きを見る</button>
</div>

.readmore2 {
  position: relative;
  margin: 50px auto 0;
  padding: 0px 0px 75px;
}

.readmore2-hide {
  height: 0;
  overflow: hidden;
  transition: all .4s;
}

.readmore2 button{
  position: absolute;
  display: table;
  left: 50%;
  bottom: 0px;
  margin: 0 auto;
  width: 200px;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  background-color: #333;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1;
  transition: all .4s;
}

$(function(){
  $('.readmore2 button').on('click',function(){
    const t = $('.readmore2-hide');
    t.toggleClass('is_open');
    if(t.hasClass('is_open')){
      const h = t.get(0).scrollHeight;
      t.css('height', h);
      $(this).text('元に戻す')
    }else{
      t.css('height','');
      $(this).text('続きを見る');
    }
  });
});

それほどコードが変わったりはなく、下記からデモページをご確認いただけます。

デモページ

最初から表示するところと隠すところを設定する

最初の解説と異なるのはここのみです。
前は1つのdivの中にコンテンツが入って、その高さの一部を表示していました。

今回は最初から表示するところ隠すところを、-showと-hideとして明確に分けていて、大事になってくるのが、-hideのところです。-showのところは正直ただ表示してるだけなので何も設定しません。

-hideの設定では、高さをゼロにして、はみ出たところをoverflow: hidden;としているので、実質何も表示しないという設定にしています。display: none;やopacity、visibilityを使っていないのは、transitionの設定をしたいのと、高さを隠すことができないためです。

jQuery用のJavaScriptの設定は上のものと変わりません。classを変えているだけです。