Simple jQuery show/hide table

Question

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

The table is like this:

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

 </span>

The jQuery function is:

$(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('<img src="' + expandIcon + '" alt="' + expandText + '" class="clickable" />')

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

$subHead.css('cursor', 'pointer')
 .click();

});

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

thanks

Answer 1

Your HTML has several validation errors in it. This can cause JavaScript to break or produce unexpected results. Run the HTML through the W3C Markup Validation Service and fix those errors. If it still won't work from there edit your question with the valid HTML and I will help further.

---

OP already answered his question but since I have the code here I will post mine as well.

Valid HTML:

<div id="collapsible">These are some new titles. 
   <table id="data">
      <tr>
         <th colspan="3">2008</th>
      </tr>
      <tr>
         <td>As You Like It</td>
         <td>Comedy</td>
         <td></td>
      </tr>
      <tr>
         <th colspan="3">2007</th>
         <td>Henry IV, Part I</td>
         <td>Hist=ry</td>
         <td>1596</td>
      </tr>
      <tr>
         <td>Sunit Joshi</td>
         <td>History</td>
         <td>2010</td>
      </tr>
   </table>
</div>

Fixed Javascript:

<!--
$(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('<img src="' + expandIcon + '" alt="' + expandText + '" class="clickable" id="expandImage" />')

    $subHead.click(function(){
        $('#data').toggle();
        ($('#data').is(':hidden')) ? $("#expandImage").attr('src', expandIcon).attr('alt', expandText) : $("#expandImage").attr('src', collapseIcon).attr('alt', collapseText);
        console.log($(this).attr('src'));
        return false;
    });

    $subHead.css('cursor', 'pointer').click();

});
//-->

I also added the alt attr. to the image since I am assume you wanted that as well.

Answer 2

I fixed it by giving an id to the image tag. Here's the update:

...previous code

var $subHead = $('#collapsible');
$subHead.prepend('<img id="imgpointer" src="' + expandIcon + '" class="clickable" />')

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

...rest of code. I'll check the HTML validation errors as MitMaro mentioned.

thanks Sunit