Tipsメニュー

記事の表示・非表示

Sample

クリックすると下に文字が表示されます。

ここの文字が表示・非表示の対象となります。
もう一回押すと非表示になります。
画像も使えます。

☆ソースの解説☆

★<head>〜</head>に置くScript★

<!--ここから-->
<script language="javascript">
<!--
function hyouji(seq){
if(document.layers){
var layid='id'+seq;
document.layers[layid].visibility=document.layers[layid].visibility=='show' ? 'hide' : 'show';
}
else if((document.getElementById) && navigator.appName.indexOf("Netscape")!=-1){
document.getElementById('id'+seq).style.display=document.getElementById('id'+seq).style.display=='none' ? '' : 'none';
}
else if(document.all){
document.all('id'+seq).style.display=document.all('id'+seq).style.display=='none' ? '' : 'none';
}
}
//-->
</script>


コピーはこちらからどうぞ。

★<body>〜</body>または各表示形式のソースに置くもの★

☆表示させるための命令部分☆

<a HREF="http://bbsX.otd.co.jp/hogehoge/" onclick="hyouji('$seq'); return false;">クリックすると下に文字が表示されます。</a>
（注１）


☆表示・非表示させる部分☆
<script language="javascript">
<!--
if(document.layers){
document.write('<ilayer id="id$seq" visibility="hide">');
}
else if(document.getElementById || document.all){
document.write('<div id="id$seq" style="display:none">');
}
//-->
</script>

ここの文字が表示・非表示の対象となります。

<script language="javascript">
<!--
if(document.layers){
document.write('</ilayer>');
}
else if(document.getElementById || document.all){
document.write('</div>');
}
//-->
</script>（注２）

コピーはこちらからどうぞ。


解説です。


まだ未完成とも言えるソースです。というのは、<ilayer>と<div>をまとめきれず、煩雑な記述になっている点、さらに実際に掲示板で使うとなんだか動かなかったりする…といった点が挙げられるので。。。実際に動かないことがあるのは特にNN4に顕著で、おそらくはJSでタグを生成しているために、ブラウザ側で全体の構成を把握出来ていないためだと思います。その場合、実際にJSを外して、代わりに<ilayer>で書いてやるときちんと動きます。ふつうのhtmlで利用するには問題ないけれども、ソースの煩雑になる掲示板で利用するにはまだ辛いかな…？って感じがしますねぇ。

<head>〜</head>のScriptに関しては、特に手を加える必要はないと思います。ちなみに、「seq」という変数を使っているのは、各記事で利用することを想定しているためなので、通常のhtmlで利用するには$seqという部分をきちんとした名前に書き換えておいて下さい。 if( )が３つありますが、上から順にNN4,NN6,IE用です。で、NN4に限っては、「display」ではなくilayerの「visibility」というのを使っています。まだilayerの特性を把握しきっていないので良く分かりませんが、文字が重なったり極端な空白が出来るかも知れないので注意して下さいね。

（注１）
表示させるための命令部分です。なるべく <a>は使いたくなかったのですが、"onClick"を全部のブラウザに対応させるには、どうもこれ以外には<form>部品しか無いみたいです。 HREF="http://bbsX.otd.co.jp/hogehoge/"とありますが、これはダミーで入れています。後半の"return false"でリンクは消されるので、JavaScriptが正常に作動すればジャンプしません。逆に、正常に動かない場合見事にジャンプしてしまうので、保険に「href="bbs_plain?base=$seq&range=1" 」のようにしてみるのもいいかもしれません。

（注２）
NN4では<ilayer>が、それ以外では<div>が生成されます。JSをオフにしている場合は非表示ではなく普通に表示されます。id$seqという名前は、各記事で用いることを前提としてこう書いたのですが、実際の記事ではid1,id2…という感じで並ぶことになります。

（注３） 全体的に。
display:IE,NN6の場合、非表示時のその領域はなくなり、ilayer:NN4の場合は領域が確保されたまま字だけ消えます。それを考慮しつつ、テーブルなどを使ってうまくデザインして下さいね。