画像のような本文の冒頭は見えているけど、後半はグラデーションで消えているような「続きを読む」ボタンの作り方です。

デモはこちら

実際のコード

<p class="text hidden">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla molestias et
  dolore, nisi repellendus odit repellat labore ratione velit quas amet tenetur,
  quis assumenda voluptate alias laborum aperiam reprehenderit incidunt. Lorem
  ipsum dolor sit amet, consectetur adipisicing elit. Sit illum incidunt dicta
  at eum cum, culpa esse consequatur maiores deleniti corporis molestias, odio
  nulla. Ipsa, magnam perferendis dolore id laboriosam. Lorem ipsum dolor sit
  amet, consectetur adipisicing elit. Nulla molestias et dolore, nisi
  repellendus odit repellat labore ratione velit quas amet tenetur, quis
  assumenda voluptate alias laborum aperiam reprehenderit incidunt. Lorem ipsum
  dolor sit amet, consectetur adipisicing elit. Sit illum incidunt dicta at eum
  cum, culpa esse consequatur maiores deleniti corporis molestias, odio nulla.
  Ipsa, magnam perferendis dolore id laboriosam.
</p>
<div class="show_more">
  +　続きを読む
</div>

.wrapper {
  width: 640px;
  margin: 30px auto;
  font-size: 1.6rem;
  line-height: 1.5;
}
.text_wrapper {
  position: relative;
  margin-bottom: 45px;
}
.text {
  height: 90px;
  overflow: hidden;
}
.show_more,
.show_more2 {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  padding-top: 60px;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(
    180deg,
    rgb(255, 255, 255, 0) 0%,
    rgb(255, 255, 255, 1) 70%
  );
  cursor: pointer;
  transition: bottom 0.2s;
}
.active {
  background: none;
  bottom: -30px;
}

$(function() {
  $(".show_more").click(function() {
    var show_text = $(this)
      .parent(".text_wrapper")
      .find(".text");
    var small_height = 90; //This is initial height.
    var original_height = show_text.css({ height: "auto" }).height();

    show_text
      .height(small_height)
      .animate({ height: original_height }, 300, function() {
        show_text.height("auto");
      });
    $(this).hide();
  });
});

CSS

細かいレイアウトに関するCSSの説明は省き、仕組みのポイントになる部分について説明します。

ちょい見せしているテキスト部分はheight: 90pxで固定し、overflow: hiddenではみ出た分を隠しています。親要素にposition: relativeを設定し、「続きを読む」ボタンをposition: absoluteで最下部に設置し背景色にグラデーションをかけています。

アコーディオンバージョン(再度最小化できる)用にactiveというクラス名を用意しています。こちらはクリック後にグラデーションを消し、本文と被らないよう-30pxだけ下げています。

jQuery

jQueryの注意ポイントとしてCSSをheight: auto に切り替えてもアニメーションが効かないという点です。これはjQueryのanimate関数だけでなく、CSS transitionでも同じです。アニメーションさせるには定数の値でないといけないようです。autoはコンテンツに応じた高さで不定なので、アニメーションが効きません。

逆に開くアニメーションが必要ない場合はjQueryでCSSを指定したり、クラス名で変えたりすれば問題なく実装できます。

アニメーションをしたい場合、値を決められればできますが、高さは本文の量によって変わってくるので予め求められません。そのため、height: autoでもアニメーションが実行されるよう、ちょっとした工夫が必要です。

var show_text = $(this)
  .parent(".text_wrapper")
  .find(".text");

まず、対象となる本文を選択します。

var small_height = 90;

最小化時の高さを指定します。これはCSSの値と同じです。

var original_height = show_text.css({ height: "auto" }).height();

続いて、本文のCSSを一旦height: autoにし、.height()で高さを取得します。この時original_heightにはautoにした時の実際の高さの数値が入っています。

show_text
  .height(small_height)
  .animate({ height: original_height }, 300, function() {
    show_text.height("auto");
  });

次にshow_text.height(small_height)でheight: autoにしたのを元の高さに戻しています。ここまでの処理は一瞬なので見た目には分かりません。

そのあと、animate関数でheightにoriginal_height(定数)を指定して、本文がびょーんと出てくるアニメーションを実行しています。実行時間は今回は390ミリ秒です。

さらにコールバック関数で高さのCSSをautoにしています。これはアニメーション実行時は定数の高さが入っており、レスポンシブなど横幅に応じてコンテンツ高さが変わる場合に追従できなくなります。そのため、最後にautoを指定してあげます。

$(this).hide();

そして最後にボタンを非表示にしています。

アコーディオンバージョンも基本的には同じですが、if文による場合分けを加えています。（細かい説明は割愛）

$(function() {
  $(".show_more").click(function() {
    var show_text = $(this)
      .parent(".text_wrapper")
      .find(".text");
    var small_height = 90; //This is initial height.
    var original_height = show_text.css({ height: "auto" }).height();

    if (show_text.hasClass("open")) {
      /*CLOSE*/
      show_text.height(original_height).animate({ height: small_height }, 300);
      show_text.removeClass("open");
      $(this)
        .text("+　続きを読む")
        .removeClass("active");
    } else {
      /*OPEN*/
      show_text
        .height(small_height)
        .animate({ height: original_height }, 300, function() {
          show_text.height("auto");
        });
      show_text.addClass("open");
      $(this)
        .text("-　閉じる")
        .addClass("active");
    }
  });
});

この処理にGoogle Analyticsなどのイベントタグを挿入しても良いかもしれませんね。