[jQuery] 長い文章をグラデーションで隠してクリックで表示する

web
2017.07.04
CSSのみで「グラデーションで隠してクリックで表示する」を実装した記事を公開しました。

CSSのみで実装する場合

[CSSのみ] 続きを読むボタンをCSSで実装する

jQueryで実装

長い文章を3行ぐらいで切っておいて、クリックで全文表示させてみます。
ページに高さを持たせたくない場合に役に立ちそう。

デモはこちら

ソース

HTML

<div id="gradation">
    <p>
        私は時間もしその成就人という事の限りを持ったた。〜略〜
    </p>
    <span id="more">もっと詳しく</span>
</div>

P要素の直後に全文表示のトリガーとなるspanを置きます。

CSS

p {
    overflow: hidden; /*はみ出した要素を非表示*/
    position: relative; /*グラデーションの位置決め用*/
    transition: .2s; /*アニメーション表示用*/
}
p.hide {
    height: 5em;
}
p.hide::before { /*beforeでグラデーションを表示*/
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 3em; /*グラデーションで隠す範囲*/
    background: -moz-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: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,0.9)), color-stop(50%, rgba(255,255,255,0.9)), color-stop(100%, #fff));
    background: -o-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: -ms-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%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f5f5f5', endColorstr='#fff5f5f5',GradientType=0 );
    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%);
}

P要素にはoverfloe: hidden;を指定しておかないと、heightを縮めても文字がはみ出しちゃう。

jQuery

$(document).ready(function(){
  var target = $("#gradation p"); //グラデーションで隠す要素
  var height = target.height(); //全文表示時の高さを取得しておく
  var fontSize = parseFloat(target.css("font-size")); //行数判別用にフォントサイズを取得
  var more = $("#more");
  if( height > fontSize*5 ){ //要素の高さがフォントサイズ×5以上だったら
    target.addClass("hide"); //hideクラスを付与
    more.css({display: "inline-block"}); //#moreを表示
    more.click(function(){ //もっと詳しくをクリックしたら
      $(this).hide().prev("p").css({height: height}).removeClass("hide");//hideクラスを削除、高さを元に戻す
    });
  };
});

P要素が5行以上(大体)なら処理を開始します。
line-heightでの行数判定は処理が面倒なので、font-sizeでの簡易行数判定をしています。
場合によっては、px指定で固定しちゃってもいいかも。

もっと詳しくをクリック後、ぬるっとアニメーションで表示したかったのだけど、JS側でheight: "auto"height: "show"にするとanimateが効かない。CSS3のtransitionも効かない。
どうしたものかと悩んだ末、行数判定用に取得したP要素の高さをクリック時に戻してやる方法にしました。

おわりに

JS,jQueryをはじめたばかりなのでコードは汚いし、汎用性も考えていないので、おおまかな参考程度に考えていただければと思います。
汎用性のあるJSにするなら、行数判定の処理をしっかり書いて、複数の要素があっても個別処理して…等々、ちょっとめんどくさそう。うーむ。