[JavaScript][HTML]toggle ze zmianą img., jak wykonać poprawnie - proszę spojrzeć w kod. Opcje

[casperii]

[HTML] pobierz, plaintext 
$(document).ready(function(){
 
$('.click_arrow').click(function(){
 
  $("#header-bottom").toggle(function(){
    $(this).animate({height:180},200);
  },function(){
    $(this).animate({height:65},200);
  }
 
  );
 
  });
 
});
 
 
<div id="header-bottom">
powiększamy / pomniejszamy diva
 
<img src="/images/arrow_down.png" class="click_arrow">
</div>
[HTML] pobierz, plaintext 

Panowie próbuje zrobić by po kliknięciu w img rozsuwał mi się div oraz img się zmieniał na arrow_up.png z arrow_down.png.
Na razie ten div po kliknięciu jakoś kuleje. Po 1 kliknięciu się rozsuwa po ponownym kliknięciu div się 2 x rozsuwa i chowa. po jeszcze jednym kliknięciu już 3 x czynność się wykonuje. Czy ktoś mi podpowie jak prawidłowo wykonać?