レイアウトの都合上、解説文などのテキストを小さく表示しなければならないことがあります。これはそのような場合の解決法のひとつです。サンプルのboxの「このboxを大きくする」ボタンをクリックすると、その場で拡大し、ボタン表示は「このboxを小さくする」に変わります。そのボタンをクリックすると、今度は縮小し、ボタン表示は元の「このboxを大きくする」に変わります。

htmlソース

<div class="box">
	<p>これはサンプルのboxです</p>
	<button>　このboxを大きくする　</button>
	<p class="honbun">サンプルテキスト本文サンプルテキスト本文サンプルテキスト本文　/*中略*/	
	サンプルテキスト本文サンプルテキスト本文サンプルテキストサンプルテキスト本文</p>
</div>

scriptソース

$(function() {
	var box = $('.box');
	var button = $('.box button');
	button.on('click', function(){
		box.toggleClass('active');
		if(box.hasClass('active'))
			button.text('　このboxを小さくする　');
		else
			button.text('　このboxを大きくする　');
	});
});