トグル処理はON／OFF交互に入れ替わるような処理のことです。
jQueryの「toggle()　：表示／非表示」を使用すればすごく簡単に実装できます。

例えば
#buttonの要素をクリックするたびに
#textの要素を表示／非表示させたい場合。

<p id="button">これは#buttonの内容です。</p>　←ここをクリック
<p id="text">これは#textの内容です。</p>　←これを表示／非表示させたい

上記のHTMLを用意したら、
「jQuery」と「下記の内容を入力したjsファイル」を読み込むだけで完了です。

$(function(){
$("#button").click(function(){
$("#text").toggle();
});
});

たったこれだけ。
以下がサンプルです。

これは#buttonの内容です。　←ここをクリック

これは#textの内容です。

さらに「toggleClass()　：クラスの追加／削除」を同時に実行すればもっと便利です。
また「toggle()」へ「fast」や「slow」を追加すれば滑らかに表示／非表示が行われます。

$(function(){
$("#button").click(function(){
$(this).toggleClass('on');　←class="on"を追加／削除
$("#text").toggle('fast');　←fastを追加で滑らかに表示／非表示
});
});

そのクラス追加／削除を利用しボタンの背景画像などの設定しました。
以下がサンプルです。

これは#textの内容です。

上記のように#textを初めは非表示にしたい場合は#textにCSSで「display: none」を指定してあげればOKです。
#buttonへは「cursor: pointer」を設定してあげればボタンであることが分かりやすいです。