How to change content of a div which toggles another div?
<p>My HTML is like this:</p>

<pre><code>&lt;div&gt;
    &lt;div class="action"&gt;Show details&lt;/div&gt;
    &lt;div&gt;Some hidden details&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My current JS is this:</p>

<pre><code>$(".action").click(function(e) {
        e.preventDefault();
        $(this).next("div").slideToggle('slow');
    });
</code></pre>

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

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