更改链接名称和图像时，当文本扩展切换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 
    }