Switch Button's Label using jQuery
<p>I am trying to use jQuery to switch a button's label on each click.</p>

<p>Following is the code I have implemented :</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;script src="jquery-1.8.2.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function(){

            $("#details_button").click(function() {
                var button_text = $("#details_button").attr("text");
                button_text == "Hide" ? $("#details_button").text("Details") : $("#details_button").text("Hide");
            });

        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button id="details_button" type="button"&gt;Details&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I expect the label in 'details_button' to change each time it is clicked, from '<strong>Details</strong>' to '<strong>Hide</strong>' and vice versa.</p>

<p>But it only changes once, from '<strong>Details</strong>' to '<strong>Hide</strong>', and then it does not change on later clicks.</p>

<p>What am I missing here ?</p>
