Question

(using jquery) I have the following function

$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .attr("title","Click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
        });
    $('tr[@class^=child-]').hide().children('td');
});

I have the following web page

<table>
    <col style="width:40px;">
    <col style="width:80px;">
    <col style="width:150px;">
    <col style="width:40px;">
<thead>
    <tr>
        <th>ID</th>
        <th colspan="2">Name</th>
        <th>Total</th>
    </tr>
</thead>
<tbody>
    <tr class="parent" id="row123">
        <td>123</td>
        <td colspan="2">[+]Bill Gates</td>
        <td>100</td>
    </tr>
    <tr class="child-row123">
        <td>&nbsp;</td>
        <td>2007-01-02</td>
        <td>A short description</td>
        <td>15</td>
    </tr>
    <tr class="child-row123">
        <td>&nbsp;</td>
        <td>2007-02-03</td>
        <td>Another description</td>
        <td>45</td>
    </tr>
    <tr class="child-row123">
        <td>&nbsp;</td>
        <td>2007-03-04</td>
        <td>More Stuff</td>
        <td>40</td>
    </tr>

    <tr class="parent" id="row456">
        <td>456</td>
        <td colspan="2">[+]Bill Brasky</td>
        <td>50</td>
    </tr>
    <tr class="child-row456">
        <td>&nbsp;</td>
        <td>2007-01-02</td>
        <td>A short description</td>
        <td>10</td>
    </tr>
</tbody>
</table>

Desired Results:

Change between the text with a ‘[+]’ and ‘[-]’ to the left of the expandable sections to indicate it can be expanded or compressed.

Answer 1

I did this before your edit, and I still think it’s valid. I changed your markup very slightly to put the [+] in its own cell eg:

<tr class="parent" id="row123">
    <td>[+]</td>           
    <td>123</td>
    <td colspan="2">Bill Gates</td>
    <td>100</td>
</tr>

Then your code becomes simply:

$('tr.parent')
    .css("cursor","pointer")
    .attr("title","Click to expand/collapse")
    .click(function(){
        var sibs = $(this).siblings('.child-'+this.id).toggle();
        var expanded = sibs.is(':visible');
        $(this).children('td').eq(0).text( expanded ? '[-]' : '[+]');
    });

Live example: http://jsfiddle.net/Vxdq8/

If you really want the +/- inside the second cell, I suggest you wrap it in a span and change the relevant line above to:

$(this).children('td').eq(1).children('span').text( expanded ? '[-]' : '[+]');

Live example: http://jsfiddle.net/8J8Vj/