jQuery – グラデーションで隠したテキストを「もっと見る」でスライド表示

文章が多めのニュース記事なんかでよくある、「もっと見る」ボタンをクリックすると詳細が表示される動きを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;
}