概要

長い文章や項目の多いフォームなどの高さを制限して、クリックで表示したいときに便利な「続きを読む」 「もっと見る」ボタン。
要素をグラデーションで隠して、ボタンをクリックすると全文を表示してくれます。
UIとして適切かはともかくとして、どうしてもページの高さを節約したいときなどに便利です。
最近では、ヤフー知恵袋の2つめ以降の回答などで見かけますね。

仕組みとしては、チェックボックスを用いて、チェックされたら兄弟要素を表示状態にするというものです。
デモはこちら

[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装するから随分と時間が立っておりますが、アニメーションさせなければjQuery使うほどでもねぇなぁ、と思ったので、今のところ一番簡単な方法をメモ替わりに書いておきます。
もっといい方法あるで！！という方はコメントやらついったーやらで教えてくださいませ。

ソース

HTML

まずはマークアップ。
.grad-wrapで必要な要素を囲んでいます。
.grad-triggerがトリガーとなるチェックボックスです。ラベルと連動させるため、任意の固有IDが必要です。
.grad-btnは実際にユーザーが操作するボタンとなるラベルです。forでチェックボックスのIDと連動させます。
.grad-itemが隠されている要素です。CSSで高さを制限して、overflowではみ出た部分を非表示にしています。

デモのように複数の要素を隠したい場合はこれをコピーし、.grad-triggerのidと,grad-btnのforを別のIDとしてください。

<div class="grad-wrap">
    <input id="trigger1" class="grad-trigger" type="checkbox">
    <label class="grad-btn" for="trigger1">続きを読む</label>
    <div class="grad-item">ここに隠したい文章を書くよ</div>
</div>

CSS

.grad-btn {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ*/
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  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%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

折りたたみ(閉じる)もしたい場合

上記は展開するとボタンが消えてしまいますが、閉じるボタンとして残しておきたい場合もあるかと思います。
その場合はこのように実装します。

デモはこちら

HTML

<div class="grad-wrap">
    <input id="trigger1" class="grad-trigger" type="checkbox">
    <label class="grad-btn" for="trigger1"></label>
    <div class="grad-item">ここに隠したい文章を書くよ</div>
</div>

HTML構造は同じですが、CSSでボタンの文言を変更したいので、label内を空にしておきます。

CSS

.grad-btn {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
}
.grad-btn::before {
  content: "続きを読む"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  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%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

ボタンのラベルは、::beforeのcontentで切り替えています。

これで閉じたり開いたりのトグルができるようになりました。
文章だけではなく、どうしても長くなるテーブルや、縦長の画像にも応用が効くかと思うので、いろいろ試してみてください。