jQueryではCSSのclassを簡単に追加・削除することができます。classを操作する場合は『 addClass() / removeClass() / toggleClass() 』を使います。

//id=msgの要素にclass=redを追加する
$("#msg").addClass("red");
//id=msgの要素のclass=redを削除する
$("#msg").removeClass("red");
//id=msgの要素のclass=redがあれば削除、なければ追加する
$("#msg").toggleClass("red");

「addClass()」「removeClass()」は簡単かと思いますが、「toggleClass()」は指定したクラス名があれば削除、なければ追加するという「ONとOFFを切り替える仕組み（これをトグルといいます）」を持っています。

このトグルの機能はすごく便利で「メニューを開く/閉じる」みたいな動きが簡単にできてしまいます。

jQuery – addClass / removeClass / toggleClass サンプル

上記ページの「toggleClassのサンプル」は、「display: none」だけのクラス「hidden」を指定して「.toggleClass(“hidden”)」をクリックで動作させているだけです。

Javascript部分

… 省略 …
	$("#tCchk p.title").click(
		function(){
			$("#tCchk p.content").toggleClass("hidden");
		}
	);
… 省略 …

CSS、HTML部分

… 省略 …
.hidden {
	display: none;
}
… 省略 …
<div id="tCchk">
<h2>toggleClassのサンプル</h2>
<p class="title">クリックしてください。</p>
<p class="hidden content">表示されました！もう一度↑をクリックすると消えます。</p>
</div>
… 省略 …

ちなみに「toggle()」というメソッドもあり、わざわざ「hidden」というクラス名を追加しなくても同じ動作をさせることができます。

//class=contentが指定された要素の表示・非表示を切り替える
$(".content").toggle();

たったこれだけで「閉じる／開く」の機能を追加することができます。ちょっとメニューが長過ぎるかな、と思う方は「toggleClass()」を利用してチャレンジしてみてはどうでしょうか？