How to change content of a div which toggles another div?

Question

My HTML is like this:

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

My current JS is this:

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

How can I also change the content of the action div to "Hide details" / "Show details" on each toggle?

So it's clear to users that clicking on the link again will close the div.

Answer 1

In your div click handler:

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

Answer 2

$(".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);
});

Code: http://jsfiddle.net/45Vz9/1/

Answer 3

Try this

$(".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>      

in Jquery

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

Answer 5

Here is another solution:

$(".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