jqueryでvisibilityを切り替えるプラグインを作る

こちらのフォームを改良している際、要素のvisibility:visibleとvisibility:hiddenの切り替えが必要になりました。

display:blockとdisplay:noneの切り替えならshow()とhide()が使えますが、visibilityの場合はそれがありません。
もちろんcss()メソッドを使えば切り替え可能ですが、いちいち書くのが面倒ですし、見た目もあまりきれいじゃありません。

というわけで、ちょうど良い機会だと思って、visibilityを切り替えるjqueryプラグインを作ってみました。

jquery.vtoggle.js

(function($){
$.fn.vtoggle = function(config){
var $this = $(this);

switch ($this.css("visibility")){
case "visible":
$this.css("visibility","hidden");
break;
case "hidden":
$this.css("visibility","visible");
break;
default:
//何もしない
break;
}

return $this; //メソッドチェーン用にreturn
};
})(jQuery);

見ての通り、本当に単純な関数です。

それでも、自分が作ったプラグインがメソッドチェーンの輪のひとつとして動いているのを見ると、ちょっと嬉しくなりますね。

まあ初めてのプラグインとしてはこのくらいでちょうど良かったと思います。