常にひとつだけ詳細表示する

質問

<a name="0" onclick="yomu(0);">A</a>
<div name="more" class="hide">Aの詳細</div>

<a name="1" onclick="yomu(1);">B</a>
<div name="more" class="hide">Bの詳細</div>

<a name="2" onclick="yomu(2);">C</a>
<div name="more" class="hide">Cの詳細</div>
というようなHTMLがあったとします。

classが「show」で表示「hide」で非表示になります。
詳細記事は最初全てhideです。

yomu(A)を実行するとAの詳細を表示、既に開いていたらAの詳細を非表示。
また、Aの詳細を表示するときA以外が開いていたら非表示に。

ここではABCだけど、実際はもっと数があります。

name="more"　の数利用できないかな？
var rflag = new Array();
function red(i){

//非表示のときrflag[i]が0
if(rflag[i] == 1){//iを非表示にする処理
ふにゃらら(iと同じ)番目のmore.className="hide";
rflag[i]=0;
} else {//iを表示する処理
ふにゃらら(iと同じ)番目のmore.className="show";
rflag[i]=1;
if([i]以外(ふにゃらら番目以外)のrflag == 1)
{//iを表示するときi以外に開いていたら閉じる処理}
}

}

のようなイメージなのですが、まだjavascriptを覚え始めて間もないのでぜんぜん方法がわかりません。
変なことしてしまってるかもしれませんが、よろしくお願いします。

回答No.1

fujillin

原理だけですが・・・
classのshowとhideを切り替えることにして、scripｔ側は操作の対象となるidを受け取ればいいので、

----HTML----
<a id="1" onclick="yomu('1_s');">B</a>
<div id="1_s" class="hide">Bの詳細</div>
などとしておいて・・・

----Script----
function yomu(i){
　var obj = document.getElementById(i);
　if (obj.className == 'hide') {
obj.className = 'show';
　} else {
　　obj.className = 'hide';
　}
}

で、対象のエレメントの表示と非表示が単純に切り替わります。
同時に他のエレメントを操作するなどは、適当に応用してください。

お礼

それぐらいの処理ならかけるのですが、非表示にする処理の時、対象のオブジェクトだけを除外する方法がわからなかったです。document.all.item(id,i)　という指定方法を見つけたので、
頭の中を整理してもっと単純に考えてみました。
フラグでクリックしたら
どれかが開いた状態「flag1」
すべて閉じている状態「flag0」として、
____________________________________________
var flag=0;
function red(a){
var id="more"
if (flag==1){document.all.item(id).className="hide";
flag=0;
} else {
document.all.item(id,a).className="show";
flag=1;
}
}

としてみたのですが、document.all.item(id).className="hide"
が上手くいきません、showはきちんと動いてくれるのですが。
idは全て同じものを振っています。なぜ動かないのか。

補足

<a href="javascript:red(0);">A</a>
<div id="more" class="hide">Aの詳細</div>

<a href="javascript:red(1);">B</a>
<div id="more" class="hide">Bの詳細</div>

<a href="javascript:red(2);">C</a>
<div id="more" class="hide">Cの詳細</div>

var flag=0;
function red(a){
var id="more";
var mor = document.all.item(id,a)
if(flag == 0){
mor.className="show";
flag=1;
} else if(flag == 1){
if(mor.className=='show'){
mor.className="hide";
flag=0;
} else {
for (i = 0; i <= document.all.item(id).length; i++){document.all.item(id,i).className="hide";}
mor.className="show";//これをforが完全に終わってから実行したい
}
}
}

概要
1全部閉じてたら対象を開く

2-Y対象が開いてたら対象を閉じる、1へ

2-N対象が閉じていたら全て閉じるfor文
　　対象を開く//ここが上手くいかない