帰ってきたNucleus

アーカイブの一覧を任意の位置で折り畳む

真面目に長年ブログをやっていると、サイドバーの「月別アーカイブ」の一覧が鬼のように長くなって、バランスが悪くなる事ってありませんか?

jQueryを使って「月別アーカイブ」の一覧を指定した件数だけ表示させて、残りは折り畳んでスマートに見せる方法をご提案します。ボタンをクリックして数件表示と全部表示を切り替えるイメージです。



デモを見る

HTML

HTML部分はだいたいこんな感じになってると思います。そこに開閉のためのボタンを追加します。



Javascript

クリックイベントで表示と非表示を切り替えます。

$(function(){
	//()内の数字が表示させておく件数です。0から数えるので5の場合は6件です。
	var box = "#list ul li:gt(5)";
	$(box).hide();

	$('#more').click(function(){
		if($(box).css('display')=='none'){
			$(box).slideDown('fast');
			$(this).text('閉じる');
		}else{
			$(box).slideUp('fast');
			$(this).text('全て表示');
		}
	});
});