Another table show/hide row question...

Another table show/hide row question...

I'm trying to create a typical show/hide row setup in a table, which I have working, but now I want to add an arrow that will toggle open & closed depending on the state of the rows. I'm adding the arrow dynamically, so that if Javascript isn't on, then they don't see the arrow, and all the rows will just show. I'm sure that it's something simple I'm missing. Any help would greatly be appreciated.

Here's my code:
   $(document).ready(function() {
      var closedArrow = '../images/arrow_closed.gif';
      var openArrow = '../images/arrow_open.gif';
      
      $('.arrow').prepend('<img src="'+ closedArrow + '" alt="collapse this section" class="arrowImage" />');
      
      $('.details').hide();
      
      $('.section_head').click(function(){
         var toggleSrc = $(this).next('.arrowImage').attr('src');

         if(toggleSrc == closedArrow) {
            $(this).next('.arrowImage').attr('src', openArrow);
            $(this).next(".details").fadeIn('fast');
         } else {
            $(this).next('.arrowImage').attr('src', closedArrow);
            $(this).next(".details").fadeOut('fast');            
         }
      });
   });


And here's my table:

            <table>
               <tr><th>Cost Type</th><th>Total Cost</th><th>Potential Billing</th><th>Estimated Billing</th><th>Submitted Billing</th><th>Actual Billing</th></tr>
                <tr class="section_head">
                   <td class="arrow">Labor</td>
                    <td>$886.75</td>
                    <td>$2,175.50</td>
                    <td>$1,500.00</td>
                    <td><input type="text" name="labor_submitted" value="$1,500.00" onchange="recalculate('submitted_total');" /></td>
                    <td><input type="text" name="labor_actual" value="$1,500.00" onchange="recalculate('actual_total');" /></td>
                 </tr>           
                <tr class="details">
                     <td>101 - Preflight/Production</td>
               <td>$160.50</td>
                    <td>$225.00</td>
                    <td>$225.00</td>
               <td><input type="text" id="labor_101_submitted" value="$702.00" onchange="recalculate('');" /></td>
               <td><input type="text" id="labor_101_actual" value="$702.00" onchange="recalculate('');" /></td>
            </tr>
         </table>                                           


FWIW, here' the code that I'm using that works, but it doesn't add the arrow, and it doesn't fade the hidden rows in and out:

   $(document).ready(function() {
      $('.details').hide();
      
      $('.section_head').click(function(){
         $(this).next('.details').toggle();
      });
   });

That works, but it's not very elegant.

Thanks in advance for any help!
Brian