CSSのみで実装する場合

[CSSのみ] 続きを読むボタンをCSSで実装する
アニメーションする必要がなければCSSでいけます。

jQueryで実装する

長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。
デモはこちら

HTML

<div class="grad-wrap">
    <span class="grad-trigger">続きを読む</span>
    <div class="grad-item">
        <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p>
    </div>
</div>

トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。

CSS

.grad-wrap {
  position: relative;
}
.grad-wrap + .grad-wrap {
  margin-top: 40px;
}
.grad-trigger {
  /*ボタンのスタイルはご自由にどうぞ*/
}
.grad-item {
  position: relative;
  overflow: hidden;
}
.grad-item.is-hide {
  height: 80px; /*隠した後の高さ*/
}
.grad-item p + p {
  margin-top: 1em;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.grad-trigger.is-show + .grad-item::before {
  display: none;
}

jQuery

var itemHeights = []; //
$(function(){
  $(".grad-item").each(function(){ //ターゲット(縮めるアイテム)
    var thisHeight = $(this).height(); //ターゲットの高さを取得
    itemHeights.push(thisHeight); //それぞれの高さを配列に入れる
    $(this).addClass("is-hide"); //CSSで指定した高さにする
  });
});

$(".grad-trigger").click(function(){
  var index = $(this).index(".grad-trigger"); //トリガーが何個目か
  var addHeight = itemHeights[index]; //個数に対応する高さを取得
  $(this).fadeOut().addClass("is-show").next().animate({height: addHeight},200).removeClass("is-hide"); //高さを元に戻す
});

まずターゲット.grad-itemの数をカウントして、取得した高さthisHeightを順番に配列itemHeights[]に入れていきます。
高さを配列にいれたら、.is-hideを付与してCSSで指定した高さに縮めます。

次に、トリガー.grad-triggerがクリックされたら、そのトリガーが全体で何個目なのかをチェックします。
そしてitemHeights[]の対応する値を呼び出し、高さを元のthisHeightに戻します。

ボタンを消さずにトグルさせたい場合

デモはこちら
「続きを読むボタンをクリックして読んだ後、高さを戻したい」という特殊な案件の場合はこのようにします。

HTML

<div class="grad-wrap">
    <span class="grad-trigger"></span>
    <div class="grad-item">
        <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p>
    </div>
</div>

先ほどと違い、.grad-trigger内を空にしておきます。
その他は同じです。

CSS

.grad-wrap {
  position: relative;
}
.grad-wrap + .grad-wrap {
  margin-top: 40px;
}
.grad-trigger {
  /*ボタンのスタイルはご自由にどうぞ*/
}
.grad-trigger::after {
  content: "続きを読む" /*クリック前のボタンのラベル*/
}
.grad-trigger .fa {
  margin-right: .5em;
}
.grad-item {
  position: relative;
  overflow: hidden;
}
.grad-item.is-hide {
  height: 80px; /*隠した後の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.grad-trigger.is-show {
  bottom: -2em;
}
.grad-trigger.is-show::after {
  content: "閉じる" /*クリック後にボタンのラベルを変える*/
}
.grad-trigger.is-show + .grad-item::before {
  display: none;
}

9割がたさっきと同じです。
ボタンのラベルを.grad-trigger::afterでCSSから操作できるように変更しました。

jQuery

var itemHeights = [];
var returnHeight;

$(function(){
  $(".grad-item").each(function(){ //ターゲット(縮めるアイテム)
    var thisHeight = $(this).height(); //ターゲットの高さを取得
    itemHeights.push(thisHeight); //それぞれの高さを配列に入れる
    $(this).addClass("is-hide"); //CSSで指定した高さにする
    returnHeight = $(this).height(); //is-hideの高さを取得
  });
});

$(".grad-trigger").click(function(){ //トリガーをクリックしたら
  if(!$(this).hasClass("is-show")) {
    var index = $(this).index(".grad-trigger"); //トリガーが何個目か
    var addHeight = itemHeights[index]; //個数に対応する高さを取得
    $(this).addClass("is-show").next().animate({height: addHeight},200).removeClass("is-hide"); //高さを元に戻す
  } else {
    $(this).removeClass("is-show").next().animate({height: returnHeight},200).addClass("is-hide"); //高さを制限する
  }
});

基本的には同じですが、クリックごとに違う操作をしたいので、トリガーに.is-showがあるかどうかで条件分岐しています。
これで閉じたり開いたりができるようになりました。