如何改變其切換另一個DIV一個div的內容？

Question

我的HTML是這樣的：

<div> 
    <div class="action">Show details</div> 
    <div>Some hidden details</div> 
</div> 

我現在的JS是這樣的：

$(".action").click(function(e) { 
     e.preventDefault(); 
     $(this).next("div").slideToggle('slow'); 
    }); 

我怎麼也改變action div來 「隱藏詳細信息」/ 「顯示詳細信息」 的內容每個切換？

因此它清楚，點擊鏈接將再次關閉DIV用戶。

Answer 1

$(".action").click(function(e) { 
    e.preventDefault(); 
    var $container = $(this).next("div"); 
    var title = $container.is(':visible') ? "Show details" : "Hide details" ; 
    $container.slideToggle('slow'); 
    $(this).text(title); 
}); 

代碼：http://jsfiddle.net/45Vz9/1/

Answer 2

在你的div click處理程序：

var next = $(this).next('div'); 
$(this).html(next.is(':visible') ? 'Hide Details' : 'Show Details'); 

Answer 3

試試這個

$(".action").toggle(
    function(e) { 
     e.preventDefault(); 
     $(this).next("div").slideDown('slow'); 
     $(this).html("Hide Details")}, 
    function(e) { 
     e.preventDefault(); 
     $(this).next("div").slideUp('slow'); 
     $(this).html("Show Details") 
    }); 

Demo

Answer 4

<div> 
    <div class="action">Show details</div> 
    <div class="toggleDiv">Some hidden details</div> 
</div>  

在Jquery的

$(".action").click(function() { 
    //e.preventDefault(); //what is it doing here 
    $(".toggleDiv").toggle("slow"); 
}); 

Answer 5

下面是另一種解決方案：

$(".action").click(function(e) { 
    e.preventDefault(); 
    var nextDiv= $(this).next("div"); 
    var title = nextDiv.is(':visible') ? "Hide" : "Show" ; 
    $(this).html(title); 
    $(nextDiv).slideToggle('slow'); 
}); 

Demo on jsFidle