[jQuery] visibleToggle()を実装する方法

2013/05/302017/03/23

2 min read

概要

jQuery のtoggle() は、指定要素を非表示・表示を切り替えるイベントである。jQuery としてtoggle() は、v1.9 で廃止されてしまったが、toggle()系のイベントといえば、他にtoggleClass()、slideToggle()、fadeToggle()などがあり、これらも同じように状態を切り替える（toggle）イベントである。

toggle()に関していえば、display プロパティのnone / blockを切り替える。ただ、display が none になると、「要素が存在しない」状態になるため、要素が隣接しているとレイアウトが崩れてしまう場合が多い。単純に要素を視覚的に非表示させたい場合に使用するのは visibility プロパティである。

jQuery に、visibility プロパティを操作する API は今のところはないため、作成する。

コード

以下のコードを定義する。

(function ($) {
  $.fn.visibleToggle = function () {
    return this.css("visibility", function (i, visible) {
      return visible == "visible" ? "hidden" : "visible";
    });
  };
})(jQuery);

そして、以下のように使用することで要素の visibility プロパティを切り替える事ができる。

$("#VisibleTest").visibleToggle();

実装内容

指定要素の visibility プロパティの状態によってvisible / hidden を切り替える。