jQueryでもっと見るボタンをクリックしたら要素を表示させる方法

もっと見るボタンを押下して、非表示要素をスライドダウンで表示させます。
読み込みは行われているので、処理が早くなるわけではないのですが、ニュースサイトなど情報量が多いサイトの場合はこういった方法が使えます。

もっと見るボタンクリックで隠した部分をスライド表示する方法

文章が多めのニュース記事なんかでよくある見せ方ですね。
テキストの一部をCSSのグラデーションで覆って、続きがあることを明示しています。

サンプル

See the Pen もっと見るでスライド表示 by ponzu (@ponzu) on CodePen.

html

<div class="content-wrap animated">
  <div class="content-txt">
    <p>この中にもっと見るで表示させたいテキストを入れる</p>
  </div>
  <div class="more-btn”>
    <p class="open">もっと見る</p>
  </div>
</div>

jQuery

3〜5行目は「もっと見る」ボタンをクリックした時に .open というクラス名がついていたら、スライドダウンさせてボタンを「閉じる」ボタンに変更します。
6〜8行目は、ボタンが「閉じる」の状態だったら、ボタンを「もっと見る」に変更してスライドアップさせています。

$(function() {
  $('.more-btn').on('click', function() {
    if( $(this).children().is('.open') ) {
      $(this).html('<p class="close">閉じる</p>').addClass('close-btn');
      $(this).parent().removeClass('slide-up').addClass('slide-down');
    } else {
      $(this).html('<p class="open">もっと見る</p>').removeClass('close-btn');
      $(this).parent().removeClass('slide-down').addClass('slide-up');
    }
  });
});

CSS

CSSでは、以下を指定してます。
・テキストをグラデーションで隠す
・ボタンをクリックした時のテキストの表示、非表用スライドアニメーション

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slide-down {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.slide-up {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}
.content-wrap {
  height: 150px;
  overflow: hidden;
  position: relative;
  margin: 0;
}
.close-btn, .more-btn {
  display: block;
  width: 100%;
  padding: 80px 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr='#00ffffff',
      endColorstr='#ffffff',
      GradientType=0
    );
}
.close-btn {
  background: none;
}
.slide-up {
  height: 150px;
  padding-bottom: 0;
  overflow: hidden;
}
.slide-down {
  height: auto;
  overflow: visible;
  padding-bottom: 50px;
}
.more-btn p {
  display: inline-block;
  color: #fff;
  cursor: pointer;
  background: #29B6F6;
  padding: 5px 20px;
  width: 80%;
  border-radius: 20px;
}
.close-btn {
  padding:0;
}
.close-btn p {
  background: #aaa;
}

もっと見るボタンをクリックしたら次の要素を表示させる

「もっと見る」ボタンをクリックしたら、次の用を表示します。クリックしたボタンは消え、次の要素のボタンが表示されます。

サンプル

html

<div class="content">
  <ul>
    <li>トマト</li>
    <li>キャベツ</li>
    <li>もやし</li>
  </ul>
</div>
<div class="more">もっと見る</div>
<div class="content">
  <ul>
    <li>りんご</li>
    <li>なし</li>
    <li>みかん</li>
  </ul>
</div>
<div class="more">もっと見る</div>

jQuery

上記のhtmlよりも前に記述してください。後に記述すると非表示の要素が一瞬表示されてしまいます。

$(function(){
  $('.content:not(.content:first-of-type)').css('display','none');//一番上の要素以外を非表示
  $('.more').nextAll('.more').css('display','none');//ボタンを非表示
  $('.more').on('click', function() {
    $(this).css('display','none');//押したボタンを非表示
    $(this).next('.content').slideDown('fast');
    $(this).nextAll('.more:first').css('display','block'); //次のボタンを表示
  });
});

閉じるボタン付きでボタンをクリックしたら要素を開閉させる

もっと見るボタンより前の兄弟要素が非表示だったら、クリックした時にテキストとクラス名を変更するようにしています。

テキストバージョンのサンプル

html

<div class="content">
    <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
    </ul>
    <p class="button">もっと見る1</p>
</div>
<div class="content">
    <ul>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
    </ul>
    <p class="button">もっと見る2</p>
</div>

jQuery

$(function () {
    $('.button').prevAll().hide();
    $('.button').click(function () {
        if ($(this).prevAll().is(':hidden')) {
            $(this).prevAll().slideDown();
            $(this).text('閉じる').addClass('close');
        } else {
            $(this).prevAll().slideUp();
            $(this).text('もっと見る').removeClass('close');
        }
    });
});

画像バージョンのサンプル

基本的な構造はテキストVerと同じですが、$(this).children(‘img’) でクリックした要素の子要素の画像名を置換して、画像を変更しています。
ここで子要素に限定しないと、もっと見るボタンが2つ以上あった場合に、全ての画像が置換されてしまうことになります。

html

<div class="content">
    <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
    </ul>
    <p class="button">
        <img src="/images/btn-more-300.gif" />
    </p>
</div>
<div class="content">
    <ul>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
    </ul>
    <p class="button">
        <img src="/images/btn-more-300.gif" />
    </p>
</div>

jQuery

$(function () {
    $('.button').prevAll().hide();
    $('.button').click(function () {
        if ($(this).prevAll().is(':hidden')) {
            $(this).prevAll().slideDown();
            $(this).children('img').attr("src", $('.button img').attr("src").replace("-more", "-close"));
        } else {
            $(this).prevAll().slideUp();
            $(this).children('img').attr("src", $('.button img').attr("src").replace("-close", "-more"));
        }
    });
});