How to achieve this simple effect in jQuery?
<p>I am trying to create a link which when clicked shows some info inside a div that was previously hidden. If the link is clicked again it hides the div. So in otherwords a basic toggle functionality.</p>

<p>Before the link is clicked the anchor text is "Show Details", once clicked the anchor text changes to "Hide Details". The problem is, when clicked again, it doesn't change back to "Show Details", it stays at "Hide Details". How can I achieve that?</p>

<p>Here's my code:</p>

<pre><code>&lt;style type="text/css"&gt;
    .hiddenDiv { border: 2px solid #ccc; width: 500px; height: 300px; }
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
    $(document).ready(function() {

        $('.hiddenDiv').hide();
        $('.button').click(function() {

            $('.button').html('Hide Details');
            $('.hiddenDiv').toggle();

        });

    });
&lt;/script&gt;

&lt;a href="#" class="button"&gt;Show Details&lt;/a&gt;
&lt;div class="hiddenDiv"&gt;
    &lt;h2&gt;Lacoste Shirt&lt;/h2&gt;
    &lt;p&gt;This is a shirt with a small alligator logo sewen on the chest area.&lt;/p&gt;

&lt;/div&gt;
</code></pre>
