[jQuery] toggle() のように visibility プロパティを切り替える方法

#概要

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 を切り替える。

twitterfacebookhatenafacebook