Hogyan alkalmazzam a jQueryt?

Azt szeretném, hogy a következő kódomban a mező csak akkor látszódjon, ha rákattintok az ikonra. Valamit nagyon elrontok...Még soha nem használtam jQeryt...

<div id="search-site"

<button id="magnifierbtn" class="open-search">

<img src="search.png" onmouseover="this.src='searchon.png';" onmouseout="this.src='search.png';" height="40" alt="Keresés" title="Keresés" onclick="this('#search-open');"/>

</button>

<div id="search-open" class="searchbox" style="display:none;">

<form class="form-search" role="search" method="get" action="">

<input name="s" id="searchbox" autocomplete="off" tabindex="2" onblur="if (this.value == '') {this.value = 'Keresés ...';}" onfocus="if (this.value == 'Keresés ...') {this.value = '';}" value="Keresés ..." class="searchtext" type="search">

<span id="searchbtn" class="search">

<img src="btnsearch.png" onmouseover="this.src='btnsearchon.png';" onmouseout="this.src='btnsearch.png';" height="20" alt="Elküld" title="Elküld"/>

</span>

</form>

</div>

</div>

<script>

$(document).ready(function() {

$('#magnifierbtn').click(function() {

$('#search-open').animate({

height: 'toggle'

}, 2000

);

});

});

</script>

Köszönöm a segítséget!