続きを読むリンクで要素の開く閉じるを簡単に組み込めるjQueryプラグイン「Readmore.js」

公開日：2015/12/24

jQuery プラグイン

ホームページ制作時、コンテンツ内のテキスト量が多い場合などコンテンツの一部を隠して「続きを読む」リンクを付けて表示させることがあります。

今回はその様な時に便利なjQueryのプラグイン「Readmore.js」をご紹介します。

Readmore.js

「Readmore.js」は「続きを読む」などのリンクで要素の開く閉じるを簡単に組み込むことができるjQueryのプラグインです。

このプラグインでは最初に表示するエリアを高さで指定できるのが便利なポイントです。
下記に「Readmore.js」プラグインの使用方法を記載します。

「Readmore.js」プラグインの使用方法

まずは下記ページから「Readmore.js」をダウンロードします。

https://github.com/jedfoster/Readmore.js

ファイル読込

jQueryとダウンロードした「Readmore.js」を読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="readmore.js"></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="readmore.js"></script>

HTML

「続きを読む」リンクを設置するコンテンツを用意します。

<article>
（省略）
</article>

（省略）

</article>

JS

コンテンツの開閉を行うように対し「Readmore.js」を実行します。
下記はデフォルトの状態です。

<script>
$(function () {
	$('article').readmore();
});
</script>

$(function () {

$('article').readmore();

});

</script>

オプション

オプションで開閉するスピードや最初に表示する高さなどを設定できます。

<script>
$(function () {
	$('article').readmore({
		speed: 1000,
		collapsedHeight: 100,
		moreLink: '<a href="#">続きを読む</a>',
		lessLink: '<a href="#">閉じる</a>'
	});
});
</script>