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

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