コンテンツの表示を ON/OFF

なんか思ったより簡単だった。

  • ID 属性で要素を特定
  • これを DOM オブジェクトとして JavaScript で持つ
  • .style.display を block にしたり none にしたり

するだけ。今回は block 要素しか ON/OFF しなかったのと、visibility でいじると IE, Opera で table に対して継承されないので。その代わり HTML の方が ID 属性細かく入りまくりになるけどこれはしゃーない。汎用の Event オブジェクトから始めるとまた実装の違いを気にする必要があれこれ出てきて面倒なので今回は見送り。できあがりは以下の通り。

// 指定コンテンツの表示を ON/OFF する
function toggle_visibility( id ) {
    var obj = document.getElementById( id );
    var self = document.getElementById( 'switch_' + id );

    if ( obj.style.display != 'none' ) {
        obj.style.display = 'none';
        set_textnode_value( self, '＋' );
    } else {
        obj.style.display = 'block';
        set_textnode_value( self, '−' );
    }
}

// 指定要素の textnode を value にする
function set_textnode_value( obj, val ) {
    var ret = 0;
    var i   = 0;
    for ( i = 0; i < obj.childNodes.length ; i++ ) {
        // textNode は nodeType == 3 で判別
        if ( obj.childNodes[i].nodeType == 3 ) {
            obj.childNodes[i].nodeValue = val;
            ret = 1;
            break;
        }
    }
    return ret;
}

これをトグルさせるときにクリックする HTML の要素は

<a href="javascript:void(0)"
   id="switch_element"
   onclick="toggle_visibility( 'id' );"
   style="border: 1px solid;">−</a>

こんな感じ。表示を切り替える要素は

<div id="element">

...

</div>

こんな風にして囲んでおく。

  • ON/OFF したい要素の ID を X とすると
  • ON/OFF させるための要素の ID を switch_X とする

ルールにしときました。

＋と−の文字を使って今コンテンツが表示されているかの状態を示しているのは、見出しの前に置いて中身が折りたたまれているかどうかを分かるようにするため。ま、よくあるやつです。全角うぜーと思ったら適当に書き換えるよろし。

Mozilla の JavaScript コンソールがあると楽だなぁ。

More