トグルによる項目の表示／非表示

こんな感じに項目の表示／非表示を切り替える方法。
HTMLはこんなんで

<a href="#" id="hoge">表示する</a>
<div id="contents">
表示／非表示されるコンテンツ部分
</div>

Javascriptはこんな感じ

$(document).ready(function(){
  $("#contents").css("display", "none");
  $("#hoge").toggle(
    function() {
      $("#hoge").text("隠す");
      $("#contents").toggle();
    },
    function() {
      $("#hoge").text("表示する");
      $("#contents").toggle();
    });
});

ポイントはtoggle関数。ここでは引数に関数を2つ受け取るtoggle(fn, fn)と引数を受け取らないtoggle()を使ってます。
使い方をまとめると

関数	用途
toggle(fn, fn)	指定したセレクタ（ここでは"#hoge"）をクリックする度に、引数で指定した最初と2番目の関数を交互に実行する
toggle()	指定したセレクタ（ここでは"#contents"）をクリックする度にセレクタに該当するものを表示／非表示する

ってな感じ。同じtoggleって関数名でも使い方は全然違うのでご注意を。素のJavascriptでやろうとしたらクリックした回数をカウントするのが面倒なので便利です＾＾