[Resolvido] Show e Hide com toggle

Irei resumir meu problema em uma única imagem:

http://img37.imageshack.us/img37/2790/imgpn.png

Como dá para notar, quando aquele link, que contem um seta para cima, for clicado ele vai esconder o conteúdo que fica na box branca e irá trocar a imagem, para uma com a seta para baixo.

Ou seja, clicou -> hide box, muda img... clicou novamente -> show box, muda img...

Mas eu quero fazer isto com toggle, será que é possível???

Segue como esta meu código

<script>
$(document).ready(function() {
 $(".hide-wrapper").click(
 function() {
 $(".box").toggle();
 });
});
</script>

Moderador: Por favor, mova o tópico para área correta.