下記のような機能を持った、用語説明のページを作りたいと思っています。

• 用語名をクリックするとその用語の説明が表示され、他の用語の説明が既に表示されていた場合は、その説明を非表示にする。(常に表示される説明は一つだけとなる)
• 現在説明が表示されている用語の用語名をクリックすると、説明が非表示になる。(同じ用語の押下を繰り返すと、表示→非表示→表示…となる)

色々調べた結果下記のようなコードを見つけ、解読しながら実装しているのですが、★印の行(ifの条件式中のi)についていまいち理解できません。なんとなく、「現在押されている用語名と別の用語名が押された場合」を判定しているのかとは思うのですが、別の用語が押された場合をシミュレーションしてみても、iの変化の流れがよくわからず、どういう流れでcとiが一致しない場合が発生するのかが理解できずにいます。

Firebugなどで確認しようと思いましたがなかなかうまくいかなかったため、こちらで質問させていただきました。

$(function(){
var clickBtn = [’.btn’]; //dt要素(用語名)
var ac_detail = [’.detail’]; //dd要素(用語の説明)
var Speed ="normal"
var openTypeOne = true;

$(clickBtn).each(function(i) {

$(clickBtn[i]).css({"cursor":"pointer"});
$(ac_detail[i]).hide();

$(clickBtn[i]).click(function(){
index = $(clickBtn[i]).index(this);
if(openTypeOne==true){
accordion_one(clickBtn[i],ac_detail[i],index,i);
}
else{
accordion(clickBtn[i],ac_detail[i],index,i);
}
});
});

//--accordion_one関数----------------------------------------//

function accordion_one(a,b,c,d){

$(a).each(function(i) {

★if(c!=i){
if($(a).eq(i).hasClass(’clickBtn_on’+d)){
$(a).removeClass(’clickBtn_on’+d);
$(b).eq(i).slideUp(Speed);
　 $(b).eq(i).fadeOut(800);
}
}
});

if ($(a).eq(c).hasClass(’clickBtn_on’+d)) {
$(a).removeClass("clickBtn_on"+d);
$(b).eq(c).slideUp(Speed);
$(b).eq(c).fadeOut(800);
}
else{
$(a).eq(c).addClass(’clickBtn_on’+d);
$(b).eq(c).fadeIn(800);
$(b).eq(c).slideDown(Speed);
}
}
…

長々とすみませんが、よろしくお願いします。