変更・リンク名＆画像トグルjQueryの

Question

を拡大したとき、私は、私はテキストが展開されたときに「隠す」にリンク名を変更する必要が拡大/リンク

のクリックでテキストを折りたたむには、次のコードを使用していますし、別のイメージを持っている（arrow_up.png）。

どうすればよいですか？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var $divView = $('div.view'); 
    var innerHeight = $divView.removeClass('view').height(); 
    $divView.addClass('view'); 

    $('div.slide').click(function() { 
     $('div.view').animate({ 
      height: (($divView.height() == 90)? innerHeight : "90px") 
     }, 500); 
     return false; 
    }); 
}); 
</script> 
<div class="view"> 
    <ul class="moduleItemExtraFields"> 
     <li>text here</li> 
     <li>text here</li> 
     <li>text here</li> 
     <li>text here</li> 
     <li>text here</li> 
     <li>text here</li> 
     <li>text here</li> 
     <li>text here</li> 
     <li>text here</li> 
    </ul> 
</div> 
<div class="slide">Show <img src="images/arrow_down.png" /></div> 

Answer 1

<script type="text/javascript"> 

    //... 

    $('div.slide').click(function() { 

     // Update the HTML in this element 
     var slideHtml = $(this).html(); 

     // Switch between show/hide 
     if (slideHtml.localeCompare('Show <img src="images/arrow_up.png" />') < 0) 
      $(this).html('Show <img src="images/arrow_up.png" />'); 
     else 
      $(this).html('Hide <img src="images/arrow_down.png" />'); 

     $('div.view').animate({ 
      height: (($divView.height() == 90)? innerHeight : "90px") 
     }, 500); 
     return false; 
    }); 

    //... 
</script> 

Answer 2

それが拡大または縮小どうかは確認するためにdiv.slideにクラスを削除/追加します。

ここDEMO

$('div.slide').addClass('expanded'); 

    $('div.slide').click(function() { 

    if ($(this).hasClass('collapsed')) { 
     $('div.view').animate({ //expand 
      height: (($divView.outerHeight() == 90) ? innerHeight : "90px") 
     }, 500, function() { 
     $divSlide.removeClass('collapsed').addClass('expanded'); 

     $divSlide.html ('Hide <img src="http://www.auto123.com/site/img/used/up_arrow.gif" />'); 
     });    

    } else { 
     $('div.view').animate({ 
      height: '0px' 
     }, 500, function() { 
     $divSlide.removeClass('expanded').addClass('collapsed'); 

     $divSlide.html ('Show <img src="http://listedmag.com/images/down_arrow.gif" />');    

     }); //collapse 
    }