よくある、ユーザが表示を切り替えるためのスクリプトです。
ソースの解説については後述を参照のこと。
// HTMLソース
// CSS部分
.ntbr{
display: none;
}
// パターンその1
<label><input type="checkbox" name="c00" id="in00" onchange="ntbr(this)">表示する</label><br>
<任意の要素 class="ntbr" id="ni00">
隠したい内容
</任意の要素>
// パターンその2
<label><input type="checkbox" name="c00" id="hoge" onchange="ntbr(this)">表示する</label><br>
<任意の要素 class="ntbr" id="hogea">
隠したい内容
</任意の要素>
// Javascriptソース
// ネタバレスクリプト実行本体
function ntbr(obj){
var idn = obj.getAttribute("id");
var dei;
if(idn.slice(0, 2) == "in"){
idn = "ni" + idn.slice(2);
}
else{
idn += "a";
}
dei = document.getElementById(idn);
if(obj.checked){
dei.style.display = disfunc(dei.tagName);
}
else{
dei.style.display = "none";
}
}
// 要素の種類
function disfunc(tgn){
var ele;
if(tgn == "table"){
ele = "table"; // この際、"block"でもよい
}
else if(tgn == "span"){
ele = "inline";
}
else{
ele = "block";
}
return ele;
}
CSSをJSでいじっているだけです。
もっと言うと、任意の要素に対して、普段は非表示の「display:none;」としているところに対し、
チェックを入れることで「display:block;」に置き換えてしまうという動作をしているスクリプトです。
ついでに、チェックを外すと非表示の「display:none;」に置き換わります。
さらに、disfunc()関数を作り、隠している要素の種類も考えています。
ただし、古いIEブラウザ(IE7以下とか)だと「display:table;」が対応していない可能性もあるため、
「ele = "table";」の一文は「ele = "block";」でもいいような気がします。
もっとも、そんなの知らんっていう人は気にしなくてもいい気がしますが。
見ての通り、任意の要素に対して設置可能です。
そのため、<div> や <p> などのブロック要素に限らず、<table> <dl> などのテーブルやリスト、
さらには <span> に対して使えばインライン要素にも設置可能です。
その際、id名にはチェックボックスのid名に対応するフォーマットでなければいけません。
id名のルールは2種類あります。
まず、チェックボックス(<input type="checkbox" id="in00" onchange="ntbr(this)">)のidが”in”で始まる場合は「in00」などのように、
”in ＋番号”の形で番号を添えて書きます。番号は何桁でも構いません(というか、実際には番号である必要はありません)。
”in”系のid名の場合は、隠したい要素のid名を「ni00」などのように、”ni ＋番号”の形で番号を添えて書きます。
ここで使用する番号はチェックボックスのid名と同じ番号にしてください。
次に、チェックボックス(<input type="checkbox" id="hoge" onchange="ntbr(this)">)のidが”in”で始まらない場合、
要は、”hoge”のような任意の文字列も設定可能です。
この場合、隠したい要素のid名を、「hogea」などのように、”チェックボックスのid名 ＋a”の形で、末尾に”a”を添えて書きます。
それから、CSSをいじるスクリプトであるため、CSSでの記述を忘れないように。
デフォルトで隠す場合は、任意の要素(ソースではntbrクラス)に対して「display:none;」を記述しておく必要があります。