トグルの実装

Wikipediaなんかでも、でかすぎて邪魔な部分を隠すトグルのリンクが比較的最近つくようになった。フリーのブログでも、最近は、いわゆるブログパーツにJavaScriptが満載であることから、JavaScriptへの制限は比較的寛容。滋賀県の秋の話題で使ったGoogleマップのトグルは次のようにしてます。

1.本文の先頭に<script>を書いて、toggle関数を作る

<script>
function toggle(mainid,anchorid,anchoropen,anchorclose,
opencontent,closecontent)
{
if(document.getElementById(anchorid).innerHTML==anchoropen)
{
document.getElementById(mainid).innerHTML=opencontent;
document.getElementById(anchorid).innerHTML=anchorclose;
}
else
{
document.getElementById(mainid).innerHTML=closecontent;
document.getElementById(anchorid).innerHTML=anchoropen;
}
}
</script>

2.トグルを貼りたいところに次のようにリンクをつくる

<a href="javascript:toggle('map1','anchor1','［開く］','［閉じる］',map1,'');"><span id="anchor1">［開く］</span></a>
<div id="map1"></div>

3.トグルで表示したいコンテンツを1.のtoggle関数のあとに入れる
toggle関数の引数は、順に、
・トグルの対象となる領域の名前
・トグルを切り替えるリンクの領域の名前
・トグルを開くときのリンクの文字列
・トグルを閉じるときのリンクの文字列
・トグルを開いたときのコンテンツ
・トグルを閉じたときのコンテンツ
2.の場合、JavaScriptのmap1という変数の内容が、トグルを開いたときの内容になる。だから、JavaScriptの変数として、コンテンツの内容を定義する。
つまり、<script>タグ全体は、［開く］

という具合になる。

で、ライブドアのブログの場合、改行が<br />に変換されるので、<script>に含まれる改行をすべて取り除かないと、<br />が挿入されてしまうので、取り除く。これでOK。2.のリンクのところは改行を取り除く必要はない。トグルを開いたときのコンテンツに明示的に改行を入れたいときは、<br />を入れるとよい。

質問ある人はコメントしてください。気が向いたらwikiに記事を作ります。