jQuery

【jQuery】行の高さに基づいて長いテキストを表示/非表示jquery.morelines

April 3, 2018
jquery.morelines

morelines.jsは、さまざまな行で長いテキストコンテンツをブロックを展開することで表示/非表示を切り替えるRead Moreボタンを作成するためのプラグイン。

How do I use it?

HTML構造

<div class="b-category_page-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
</div>

プラグインを初期化

$('.b-category_page-description').moreLines();

オプションを使用してカスタマイズ

$('.b-category_page-description').moreLines({
	linecount: 3,                   	// force moreLines after a certain number of lines. Default is 'auto' auto = 1
	baseclass: 'b-category_page',   	// define your custom first part of class name for your CSS, for example 'b-category_page'
	basejsclass: 'js-category_page',	// define your custom first part of class name for js manipulation if needed
	classspecific: '-description',  	// specify you class name, for example '-description' - it will combine with baseclass and transform to 'b-category_page-description'
	buttontxtmore: "read more",     	// Add you inner text for button
	buttontxtless: "read less",     	// Add you inner text for button
	animationspeed: 250             	// Type your custom speed animation, by defaul is 'auto' auto = 1
});