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

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

Contents

readmore.jsを使用して指定高さ以上のコンテンツエリアに自動で「続きを読む…」を表示するJavaScriptの記述
「続きを読む…」を表示するためのHTML記述
readmore.jsを使用して指定の高さ以上のコンテンツに自動で「続きを読む…」を表示するデモページ
ソース元：Readmore.js: jQuery plugin for long blocks of text

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