jQueryのclickについて

質問

現在仕事でjQueryを使用して、要素の表示非表示を行うイベントを作成しているのですが、一つ難題がありまして・・・まず下記に簡単に文法を記述しましたのでご覧下さいませ・・・

『html』
<ul>
<li>ボタン1</li>
<li>ボタン2</li>
<li>ボタン3</li>
</ul>
<div class="area"><!-- 要素 --></div>
<div class="area"><!-- 要素 --></div>
<div class="area"><!-- 要素 --></div>
『jQuery』
j$("li").click(function(){
var btnNum = j$("li").index(this);
j$(".area").hide("");
j$(".area").eq(btnNum).show("");
});
上記にしたときに例えば”ボタン1”を押した時に再度”ボタン1”をおすとここでいう一番目の”area”を消去したいのですが、
toggleを使用すると”ボタン1”を押した時に”ボタン2”を押すと再び”ボタン1”を押すと、消去してからの動作をするため二度クリックしないと”area”が表示されません…
そこでtoggleの様な動作で、同じボタンを二度押すと対象の要素が消去されるようないい方法ありませんでしょうか？
折角jQueryを使用しているのでスリムな記述がしたいんですよね・・・
宜しくお願いします。

回答No.1

fujillin

勝手な想像で、表示するdivは0または1にしたいという意味と解釈しました。
実は、jQueryは使用したことがないので、たいしてわからないのですが・・・

ご提示のものは「jquery-1.2.6」では動作しないようです。
どうも、外側の$(function()が抜けているらしいのと、j$("li").～のような構文が通らないみたい。

というのは、置いておいて、そんなわけでロジックのみ。
(1)対象のdivが表示状態なら、非表示にして終わり。それ以外
　　なら、ご提示の処理をする。

(2)表示中のdivのインデックスを控えておいて、最初にインデックス
　　を比較して、(1)と同様に処理を分岐

(1)、(2)とも同じようなもんですが、一応、両方とも動作確認しました。

あと、勝手な意見ですが、ドキュメントの他の部分にliやdivがあるとインデックスが狂ってしまうので、親要素にidなどを振って対象範囲を限定しておいたほうがよさそうですね。
（他に該当要素が何もないのであれば、問題はありませんが）