それぞれの高さを取得して実行させたい

Question

下記のようなソースで、最近よくあるテキストの下部分にグラデーションがかかっていて、続きを読むというボタンをクリックすると全てのテキストが表示されるというのを実装しました。

ただこのjｓの書き方だと、複数設置した場合に、どれかの高さを参照してしまい、
思った通りに動きません。。

eachなどを使うのかと思い、色々やってみたのですが上手くいかず。。
汎用的な書き方などがあるのでしょうか。
アドバイスいただけると助かります！

<div class="gradationText p01">
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<div class="moreBtn">「▼ 続きを読む」</div>
</div>

<div class="gradationText p02">
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<div class="moreBtn">「▼ 続きを読む」</div>
</div>

<div class="gradationText p03">
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<div class="moreBtn">「▼ 続きを読む」</div>
</div>

.gradationText {
  position: relative;
  text-align: center;
}
.gradationText p {
  text-align: left;
  overflow: hidden;
  position: relative;
  -webkit-transition: .2s;
  transition: .2s;
}
.gradationText p.hide {
  height: 9em;
}
.gradationText p.hide:before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 5em;
  /*グラデーションで隠す範囲*/
  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: -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: -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%);
}
.moreBtn {
  display: none;
}

$(function() {
            var target = $(".gradationText p"); 
			var height = target.height(); 
			var fontSize = parseFloat(target.css("font-size")); 
			var more = $(".gradationText .moreBtn");
			if( height > fontSize*5 ){ 
				target.addClass("hide"); 
				more.css({display: "inline-block"}); 
				more.click(function(){ 
				  $(this).hide().prev("p").css({height: height}).removeClass("hide");
				 });
			};
};

Answer 1

ヒントだけ

var target = $(".gradationText p"); 
var height = target.height(); 

この時点でheightを取得しているのが原因です。

Comments

[hiro421]

ヒントありがとうございます！
ということはクリックしたタイミングで高さを取得するようにすればいいのでしょうか？

[turbgraphics200]

はい。

[hiro421]

できました！ありがとうございます！