yamachan Ajax/.NET/C# メモ

2007-02-04

[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';
}
}