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

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

このページをシェアする

関連タグ

関連記事

Boolean型の変数に適した命名規則

背景 / プレフィックス / どのような条件なのか分かりやすくする / 否定形を避ける / 同じ意味の単語を避ける / プロジェクトの命名規則やコーディング規約に従う / Linter で矯正する

[ESLint] 特定のimportにおいてパスの末尾スラッシュを禁止する方法

背景 / やりたいこと / @typescript-eslint/no-restricted-imports を利用した / 余談(末尾のスラッシュ自体を禁止にする)

[JavaScript] Live NodeListとStatic NodeListについて

はじめに / 要素セレクタとは / Live NodeList とは / Static NodeList とは / Live NodeList と Static NodeList の違い / どちらを選択すべきか

近年のWeb開発においてjQueryの利用をやめるべき理由

jQuery の功績と功罪 / 現代の Web 開発と jQuery / jQuery をやめるメリット / jQuery の代替手段 / おわり / Footnotes

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考