[JS] クリックで表示/非表示する関数

yamachan GAMEメモ の投稿には、ネタバレを含むものがあります。 例えば [MSX] Shooting: 魔城伝説 の後半面＆エンディングの情報とか。

ネタバレ部分を最初は隠しておいて、クリックすると表示/非表示を切り替える。 まぁ、JavaScript の初歩って感じですね。 実用になる最小のサンプルといいますか...。

よく使うので、メモとして貼っておきます。

jp.rinco.display = function(id) {
  var target = document.getElementById(id);
  if (target.style.visibility == 'hidden') {
    target.style.visibility = 'visible';
    target.style.display = 'block';
  } else {
    target.style.visibility='hidden';
    target.style.display = 'none';
  }
}

以下が使用例です。 クリックしてみてください。

エンディングについて (ネタバレのためクリックで表示)

ここにネタバレの内容！
ここにネタバレの内容！

以下のような html で実現しています。 複数使用するときには 'div_netabare1' を適当に変更してください。

<div
  style="background-color:black;
  color:white; padding:4px"
  onclick="jp.rinco.display('div_netabare1');">
エンディングについて (ネタバレのためクリックで表示)
</div>
<div id="div_netabare1"
 style="visibility:hidden; display:none;
 border:solid 2px black; padding:4px">
ここにネタバレの内容！<br />
ここにネタバレの内容！
</div>

2007/2/27 追記: jp.rincoオブジェクト へ移動
2007/3/13 追記:

いろいろ多用していますので、ちょっと改良してみました

まず、対象の指定に element だけでなく、id値も指定できるように拡張してみました。 必要もないのに getDocumentById() するのも面倒ですしね。

また強制的に表示/非表示を指定できるようにしてみました。 第2引数に true を指定すると強制表示、false を指定すると強制非表示です。 むろん、指定しなければ従来どおりのトグル動作です。

jp.rinco.display = function(id, v) {
  var target;
  if (typeof(id) == 'string')
    target = document.getElementById(id);
  else 
    target = id;
 
  var vflag;
  if (v == undefined) {
    if (target.style.visibility == 'hidden')
       vflag = true;
   else
       vflag = false;   
  } else
   vflag = v;
 
  if (vflag) {
    target.style.visibility = 'visible';
    target.style.display = 'block';
  } else {
    target.style.visibility='hidden';
    target.style.display = 'none';
  }
}