jTruncSubstr「続きを読む」の折りたたみ

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequunt...
続きを読む
演奏音たてへぶんへぐるぐる野たですると大きなたたというセロた。俄たらだを長いはたましも小麦のいやたての所をもまるでセロですたて、などセロにしはすりでし。 しいただい何は小太鼓が長いですとこんどの顔...
続きを読む
<div class="omission">
	Lorem ipsum dolor sit amet, consectetur adipisicing（略）cillum dolore eu fugiat nulla pariatur.
</div>
.truncate_more_link {  /*.truncate_more_link …開閉部分のクラス名 */
	text-decoration: none;
	font-weight: bold;
	color: #9400d3;
	cursor: pointer;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> //古いver.じゃないと動作がぎこちない。
<script src="jquery.jtruncsubstr-1.0rc.js"></script>
<script>
	$().ready(function() {
		$('.omission').jTruncSubstr({	//.omission部分は任意の.クラス名（または#id名）
			length: 100,				//表示させる文字数（スマホだと300字くらいが適当かな…）
			minTrail: 20,				//省略文字の最低文字数。これ以下しか省略されないようなら処理しない。
			moreText: "続きを読む",		//非表示部分を表示するリンクの文字列　デフォルトはmore
			lessText: "閉じる",			//表示した後、再び非表示にするリンクの文字列　デフォルトはless
			ellipsisText: "...",		//続きがあることを表示するための文字列
			moreAni: "600",				//表示時のアニメーション速度。デフォルトは 500。
			lessAni: "300",				//非表示時のアニメーション速度。デフォルトは 500。
		});
	});
</script>

オプション設定も可能

演奏音たてへぶんへぐるぐる野たですると大きなたたというセ...
続きを読んでね！
<div jg="jTruncSubstr" jg:jTruncSubstr="length:30,moreText:'続きを読んでね！',lessText:'折りたたむよ！'">
	演奏音たてへぶんへぐるぐる野たですると大きなた…（略）… 夜飛びだしましなかで考えましない。
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="jglycy-1.0.js"></script>
<script src="jquery.jtruncsubstr-1.0rc.js"></script>

TOP