Why does this jQuery show/hide toggle work and how can i make it better?
<p><a href="http://85.235.23.133/test.html" rel="nofollow">On this page</a> 
the two on/off icons toggle between showing/hiding two rows in a table. </p>

<p>The jquery mechanism to keep track if a row status is shown is to check if the clickable text is "show" or "hide":</p>

<pre><code>if ($(source).html() == "show") {
        $(source).html("hide");
        viewContainer.show();
    }
    else {
        $(source).html("show");
        viewContainer.hide();
    }
</code></pre>

<p>I get that this should work fine for regular <code>&lt;a href="..."&gt;show&lt;/a&gt;</code> links, where there is actual "show" or "hide" text to check for and change, but it also works on <code>&lt;img&gt;</code> tags that do not have any text that could alternate between "hide" and "show". </p>

<ol>
<li><p>Why does this work?</p></li>
<li><p>What I really want to do is toggle the IMG ALT text together with the rows showing and hiding. Any clues as to how this can be done?</p></li>
</ol>

<p>(Incidentally I tried chucking the code into <a href="http://jsfiddle.net/2Jj2w/2/" rel="nofollow">http://jsfiddle.net/2Jj2w/2/</a>, but it doesn't work there. Any ideas why?)</p>

<p>===== EDIT =======</p>

<p>Thanks to everyone who helped! </p>

<p>End result toggles the IMG ALT property and keeps check on show/hide status,
and IMG TITLE tags are toggled as well. </p>

<p>Proper jquery "prop" used instead of "attr".</p>

<p>Placekittens implemented.</p>

<pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'&gt;&lt;!--mce:0--&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt; 
    function toggleShowHide(id, source) {
         viewContainer = $(id);

         if ($(source).prop('alt') == "hidden") {
              viewContainer.show();
              $(source).prop('title', "Hide details");
              $(source).prop('alt', "shown");
         }
         else {
              $(source).prop('alt', "hidden");
              viewContainer.hide();
              $(source).prop('title', "Show details");
         }
    }&lt;/script&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;a href="javascript:toggleShowHide('#row1', '#toggle_row1')" &gt;&lt;img src="http://placekitten.com/40/40" id="toggle_row1" alt="hide" title="Hide details"  /&gt;&lt;/a&gt; &lt;a href="javascript:toggleShowHide('#row2', '#toggle_row2')" &gt;&lt;img src="http://placekitten.com/40/40" id="toggle_row2" alt="hide" title="Hide details" /&gt;&lt;/a&gt;
    &lt;table border="1" width="200"&gt;
        &lt;tbody id="row1"&gt;
            &lt;tr&gt;
                &lt;td&gt;ROW1&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;tbody id="row2"&gt;
            &lt;tr&gt;
                &lt;td&gt;ROW2&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>
