JavaScript：トグル関数の基本形

jQueryを使えば簡単にできる表示のトグルですが、社内ではjQueryの使えない環境がぼちぼちあるためベーシックなJSで組まざるをえないことが結構あります。

JavaScript

function toggle($this, $target) {
    var elm = document.getElementById($target);
    var style = elm.currentStyle || document.defaultView.getComputedStyle(elm, '');
    if (style.display == 'none') {
        elm.style.display = 'block'
    } else {
        elm.style.display = 'none'
    }
    if ($this.className.indexOf('active') > 0) {
        $this.className = $this.className.replace(' active', '');
    } else {
        $this.className += ' active';
    }
}

これを使う場合は下記のようなHTMLで記述します。

<a href="javascript:void(0)" onclick="toggle(this,'targetID')">

ターゲットのdisplayの値を調べ、noneであればblock、blockであればnoneにするという簡素なものです。

クリックされた<a>タグ自身をthisで投げているのは、この<a>タグ自身にもクリックされた元としてクラス「active」を付与してスタイルを変更するためです。