次のような簡単なことでも素人には分かりづらい部分があります。備忘録としてメモ。
とりあえずJavaScript の勉強がてら、http://blog.kenjisato.jp/extra.php?jprofile に内容の表示・非表示を制御できるスクリプトを組み込んでみた。やることは簡単で、prototype.js で定義されている toggle() 関数を使います：
<script type="text/javascript" src="PATH/prototype.js"></script>
<script type="text/javascript">
// 非表示を初期値にする
window.onload = function hideText(){Element.hide("switchable1"); Element.hide("switchable2");}
// 表示・非表示の切り替え
function switcher1() {var item = $('switchable1'); Element.toggle(item);}
function switcher2() {var item = $('switchable2'); Element.toggle(item);}
</script>
をソースの適切な場所に書き込んで表示・非表示を切り替える関数を作ります。切り替え可能にしたい内容の方は、たとえば*1
<h2 class="switchable" onclick="switcher1()">タイトル</h2> <div id="switchable1">切り替え可能な内容1</div> <h2 class="switchable" onclick="switcher2()">タイトル</h2> <div id="switchable2">切り替え可能な内容2</div>
のようにやります。切り替え可能な内容が増えるごとに関数を増やさないといけない。あまり上品なやり方ではないですが、当面はこれで十分。困ったのは、ソースの適切な場所がどこかということです。いちおう、<html> ～ </html>（ああ、ほんまにアホや。はずかしい。<body> ～ </body> のマチガイです） の中に全部書いてます。 prototype.js の読み込みはヘッダに書いてもよさそうな気がするのに、そうしたら動かなかった。理由は不明。難しい。Nucleus のスキンがどんどん汚されていくｗ
- 注1 <h2> タグの class 要素は、マウスが乗ったときにカーソルを変えたいので付加してます。ここではあまり本質的ではないですが、スタイルシートにこの指定をしておかないとクリック可能かどうか分かりにくいです。
