readmore.jsを使用して指定高さ以上のコンテンツエリアに自動で「続きを読む…」を表示してみる

情報量がどれ位入るかわからないコンテンツエリアに指定の高さ以上の情報量になった場合、自動で「続きを読む…」(折りたたみ?)的なリンクを表示してみます。

1.JavaScriptの記述例

<script src="jquery-1.9.0.min.js"></script>
<script src="readmore.js"></script>
<script>
$(document).ready(function() {
	//コンテンツエリアのid名を指定
	$('#info').readmore({
		moreLink: '<a href="#">続きを読む…</a>',
		maxHeight: 250
	});
});
</script>

2.HTMLの記述例

(上記で指定のid名のdivエリアです)

<div id="info">

<ul>

 	<li>
					<a href="https://dad-union.com/">DAD UNION</a></li>


 	<li>
					<a href="https://dad-union.com/about">このサイトについて</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/57">getJSONでjson形式の配列情報を取得表示する方法</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/51">jQueryの$.get()を使ってxmlデータを取得表示する方法</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/46">window.location.search:URL(アドレス)のパラメータ値をJavaScriptで取得する方法</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/43">テキストボックスの入力文字をJavaScriptで別エリアに同時にコピー表示する方法</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/32">iframe先ページの高さにあわせてコンテンツを表示する方法</a></li>

</ul>

</div>

<!--/info-->

readmore.jsを使用して指定の高さ以上のコンテンツに自動で「続きを読む…」を表示デモ

ソース元:Readmore.js: jQuery plugin for long blocks of text

PHPとかでは良く使いそうな「続きを読む」リンクですが、これは高さで指定するので文字サイズを気にせず使えるので良いかもしれません。

※流用される場合は自己責任でお願いします。