jQueryで表示と非表示の切り替えについて

趣味の写真ギャラリーサイトの制作を行っており、トップページには以下のようにサムネイルを配置しております。 とりあえずid="content"内に全画像（サムネイル）を配置（表示）しておき、以下のようなことを行いたいのですが… id="haru" クリック時、class="haru"以外の要素に"display:none;"を追加… id="natsu" クリック時、class"natsu"以外の要素に"display:none;"を追加… id="aki" クリック時、class="aki"以外の要素に"display:none;"を追加… id="fuyu" クリック時、class="fuyu"以外の要素に"display:none;"を追加… id="jitensya"… id="umi"… id="koibito"… id="yuki"… classをタグのように使い、画像の表示と非表示を切り替える上手い手を探しております。jQueryでdisplay:noneを追加したり、toggleを使って元の状態に戻したりすることは可能でしたが、haruクリック後にnatsuをクリックすると期待通りに動きが得られなかったりと、60のおじいちゃんにはお手上げです。 解決法をjQueryの達人にご教授頂ければ幸いです。if文と呼ばれる、showの時にhide、hideの時はshowなど、そういったことが必要な気がしております。どうぞ宜しくお願いいたします。