クリックすると省略されている文章の続きが表示されるようにする簡単なスクリプト[jQuery]

長い文などでそのエリアに入りきれないと「・・・」のように省略することがあったりします。これはCSS3のtext-overflowで簡単に実装することができます。

その省略された文の続きを読むために、よく「続きを読む」などのボタン等を設置したりしますね。それをクリックしたときにその続きが表示されるような、めっちゃ簡単なスクリプトを書きました。text-overflowが使われていることが想定ですが。

サンプル

Before(クリック前)

After(クリック後)

CSS

.addTextOverFlow {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

text-overflowは、white-space: nowrap;とoverflow: hidden;の指定が必ず必要とか。text-overflowに関しては下記のリンクが参考になります。

jQuery

jQuery(function($) {
	var $commentBox = $("p");
	var $remove = $("#toggleBtn");
	var txt1 = "続きを読む";
	var txt2 = "コメントを隠す";
	$commentBox.addClass("addTextOverFlow");
	$remove.click(function(){
		$commentBox.toggleClass("addTextOverFlow");
		if(!$commentBox.hasClass("addTextOverFlow")){
			$remove.html('' +txt2+ '');
		} else {
			$remove.html('' +txt1+ '');
		}
	return false;
	});
});

addTextOverFlowというクラスがついているのをクリックするとaddTextOverFlowをリムーブして、text-overflowの指定を無効し、ついでに「続きを読む」のテキストを「コメントを隠す」に変更するという簡単なものです。よかったら参考にしてください。(参考にもならんか...)