JQueryで折りたたみ

前回の記事でソースを示すのに折りたたみボックスをJQueryを使って作ってみました。ただ単にJavaScriptで作っても良かったのですが、なんとなく気分で。

実際に動かすとこんな感じになります。
(※ サンプルはWordpressからBloggerに移った関係で消滅しました)

JavaScriptコード

$(document).ready(function() {
$("intput.oritatami").hover(function(){
$(this).css("cursor","pointer");
},function(){
$(this).css("cursor","default");
});
$("p.oritatamiC").css("display","none");
$("input.oritatami").click(function(){
$(this).next().slideToggle("fast");
var text = $(this).attr("value");
if(text.indexOf("表示") > 0)
text = text.replace("表示","隠す");
else
text = text.replace("隠す","表示");
$(this).attr("value",text);
//$(this).next().css("display","block");
});
});

HTMLコード

<input class="oritatami" type="button" value="中身を表示" />
<p class="oritatamiC" style="display:none">中身中身中身
中身中身中身
中身中身中身</p>

HTMLコードの中身を格納するPタグでdisplay:noneとしていますが、しなくても自動的に隠してくれます。ただ、HTMLが全部ロードし終わったあとに隠されるので少々目障りです。ですので、ローカルでもスタイルを指定しておきました。

これを作るにあたってjQueryでリストを開閉させたいをかなり参考にしました。っていうかほとんどそのまんま。まだJQueryは勉強中（するのか！？）なのでこんなしょぼいもんですみません。