簡潔なJavaScriptで実現したい

質問

次のような、btnToggleというクラス名のdivタグがいくつかあるHTMLで、
それぞれクリックするとそれぞれの「開く／閉じる」が反転するという動きをさせたいです。

<div class="btnToggle"><a href="#"><span>＋</span>開く</a>
<div>AAA</div>
</div>
<div class="btnToggle"><a href="#"><span>＋</span>開く</a>
<div>BBB</div>
</div>
<div class="btnToggle"><a href="#"><span>＋</span>開く</a>
<div>CCC</div>
</div>
　　　：
<div class="btnToggle"><a href="#"><span>＋</span>開く</a>
<div>XXX</div>
</div>

下記のようなJavaScriptで実行してみたのですが、
いくつかのdivタグをそれぞれクリックすると、flgの値と現在の状態が入れ替わってしまいます。
クラス名が同じで、flgも一つの変数なので当たり前なのですが…

<script type="text/javascript">
$(document).ready(function(){
var flg = "close";
$(".btnToggle").click(function(){
if(flg == "close"){
$(this).html("<span>－</span>閉じる");
flg = "open";
}else{
$(this).html("<span>＋</span>開く");
flg = "close";
}
});
});
</script>

私が考えられることは、classではなく、idで「btnToggle1」「btnToggle2」「btnToggle3」…などと定義し、
JavaScriptのプログラムを次のように書くしか思いつかないのですが、
これでは、我ながら間抜けなプログラムだなと思いました。

<script type="text/javascript">
$(document).ready(function(){
var flg1 = "close";
$(".btnToggle1").click(function(){
if(flg1 == "close"){
$(this).html("<span>－</span>閉じる");
flg1 = "open";
}else{
$(this).html("<span>＋</span>開く");
flg1 = "close";
}
});

var flg2 = "close";
$(".btnToggle2").click(function(){
if(flg2 == "close"){
$(this).html("<span>－</span>閉じる");
flg2 = "open";
}else{
$(this).html("<span>＋</span>開く");
flg2 = "close";
}
});

var flg3 = "close";
$(".btnToggle3").click(function(){
if(flg3 == "close"){
$(this).html("<span>－</span>閉じる");
flg3 = "open";
}else{
$(this).html("<span>＋</span>開く");
flg3 = "close";
}
});
　　　　　　　：
　　　　　　　：
});
</script>

配列などを使えばもっと簡潔になるのでしょうか。
どうか教えてくださいますようお願い申し上げます。

回答No.1

Ogre7077 · ベストアンサー

flg = "open"
flg = "close"
⇒ $(this).toggleClass('opened')
参考) http://js.studio-kingdom.com/jquery/attributes/toggle_class

if (flg != "close")
⇒ if ($(this).hasClass('opened'))
参考) http://js.studio-kingdom.com/jquery/attributes/has_class

ついでに
$(".btnToggle").click(
⇒ $(".btnToggle a:link").click(

CSS
⇒ .btnToggle a:link { 閉じている状態での書式 }
⇒ .btnToggle a:link.opened { 開いている状態での書式 }

更に余計なお節介ではありますが、idで「btnToggle1」ならば
$(".btnToggle1")
⇒ $("#btnToggle1")

お礼

Ogre7077さん、詳しく教えて頂いてありがとうございます。
toggleClass、hasClass、とても便利ですね。
教えていただいたWebサイトから他の関数についても勉強できました。

目的としていたプログラムも完成しました。
大変助かりました。

回答No.2

kosukejlampnet

jQueryを利用しているのであれば基本下のコードで開閉できます。

$(function(){
$(".btnToggle a").click(function(){
$(this).next('div').toggle();
});
});

http://api.jquery.com/toggle/

お礼

kosukejlampnetさん、ありがとうございます。

開閉はできていたのですが、その動作に合わせて表示する文字列の制御がうまくできませんでした。

教えて頂いたWebサイトから、toggleやnextの使い方を理解することができました。
jQeryってすごいですね。
痒いところに手が届くって感じだなと感動しました。
今後も勉強したいと思います。ありがとうございました。