画像クリックで表示・非表示の切替

行き詰まってしまっておりますので質問します。

WordPress 3.5.1です。

ボタンを押したら特定の要素が表示・非表示されると言うものをやりたいのですが、htmlでは挙動していたものが、wordpressでは上手く動きません。

┏━━┓
┗━━┛
btn1 btn2

btn1 btn2をクリックすると四角で囲まれた部分にコンテンツが表示される動きをやりたいと考えております。
クリックしても表示に切り替わらずのままで行き詰まってしまいましたので、
ご教授頂けたらと思い、投稿致しました。

ヘッダー部には

<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');
?>
<script>
jQuery(document).ready( function(){
	jquery("#btn01").click(function(){
		jquery("#contents2").hide();
		jquery("#contents1").show();
	})
	jquery("#btn02").click(function(){
		jquery("#contents1").hide();
		jquery("#contents2").show();
	})
})
</script>
<?php wp_head(); ?>

と書いております。

実際のボタンのところは
htmlでは<a href="javascript:void(0);" id="btn01" />
と書いていましたが動かないので
<input type="image" id="btn02" src="...">と書いてみたりしていますが、やはり動きません。

jqueryの問題なのか、いまいち問題点が絞り出せておらず、苦戦しております。
判る方おりましたらどうかよろしくお願いします。