Simple jQuery show/hide table
<p>I have this simple JQuery function to hide or show a table. the show/hide works but the image (plus/minus) is not changing. </p>

<p>The table is like this:</p>

<pre><code>     &lt;span id="collapsible"&gt;These are some
     new titles. 
    &lt;table id="data"&gt;
    &lt;tr&gt;
    &lt;th colspan="3"&gt;2008&lt;/th&gt;
    &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;As You Like It&lt;/td&gt;
    &lt;td&gt;Comedy&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;&lt;th colspan="3"&gt;2007&lt;/th&gt;&lt;tr&gt;
    &lt;tr&gt;
    &lt;td&gt;Henry IV, Part I&lt;/td&gt;
    &lt;td&gt;History&lt;/td&gt;
    &lt;td&gt;1596&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Sunit Joshi&lt;/td&gt;
    &lt;td&gt;History&lt;/td&gt;
    &lt;td&gt;2010&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

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

<p>The jQuery function is:</p>

<pre><code>$(document).ready(function() {
    var collapseIcon = 'images/minus.png';

var collapseText = 'Collapse this section';

var expandIcon = 'images/plus.png';

var expandText = 'Expand this section';

var $subHead = $('#collapsible');
$subHead.prepend('&lt;img src="' + expandIcon + '" alt="' + expandText + '" class="clickable" /&gt;')

$subHead.click(function(){
 $('#data').toggle();
 ($('#data').is(':hidden')) ? $(this).attr('src', expandIcon) : $(this).attr('src', collapseIcon);
 return false;
});

$subHead.css('cursor', 'pointer')
 .click();
</code></pre>

<p>});</p>

<p>Any thoughts what might be wrong here. The image stays at the initial '+' state.</p>

<p>thanks</p>
