JavaScript

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

情報量がどれ位入るかわからないコンテンツエリアに指定の高さ以上の情報量になった時、readmore.jsを使用して自動で「続きを読む…」(折りたたみ)リンクを表示する方法をご紹介します。

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

※jquery-1.9.0.min.js、readmore.jsfファイルを読み込みます。#infoエリアがheight=250px以上の時「続きを読む…」を表示します。

<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>

「続きを読む…」を表示するためのHTML記述

※コンテンツエリア(id=”info”)内にliタグを複数用意し250px以上の高さになる様にしてます。

<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を使用して指定の高さ以上のコンテンツに自動で「続きを読む…」を表示デモ

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

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

PHPでも「続きを読む」リンクは出来ますが、readmore.jsを使えば高さ指定で「続きを読む…」を表示するので文字数を気にせず使えて良いです。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。