jQuery：toggleとtoggleClassを正しく使いこなす

toggle()
指定した要素に直接スタイルの「display:none」を付与・解除を行う。

toggleClass()
指定した要素に指定したクラスの付与・解除を行う。

toggleは表示のオン・オフのみでシンプルに扱えますが、何かをスイッチにしてスタイルの変更を行うには toggleClass でクラスの付与・解除を行う方が幅広く利用できます。

JavaScript

$(".switch").click(function () {
  $("#target").toggleClass("active");
});

上記例の場合、「switch」をクリックした再にID「target」の付いた要素にクラス「active」を付与します。

クラスの有無でレイアウトを大きく変えたりすることもできるので、jQueryによる表示切り替えの基本と言えます。