0

I want to change the background image of only the class that I click on but the same class name is applied 5 times. I want the arrow to point up if the link is 'Hide' and down if the link is 'Show' Here is the jQuery I'm using....

I'll add the first half the jQuery that is actually doing the hiding of the 'tr's

/* This script collapases and expands the portlet table */
$('table.summary_content_table tr.totalRow').click( function() {
$(this).nextAll('tr').each( function() {
if ($(this).hasClass('totalRow')) {
    return false;
}
    $(this).toggle(50);     
});

/* This script sets the link to say 'Hide' or 'Show' as appropriate */
if ($(this).find('td span.clickme').html()== ('Hide')) {
    $(this).find('td span.clickme').html('Show');
    **$(this).parent().next('.clickme')**.css('background-image', 'url(images/arrows/arrow-nav-down-slate.png)');
} else {
    $(this).find('td span.clickme').html('Hide');
    **$(this).parent().find('.clickme')**.css('background-image', 'url(images/arrows/arrow-nav-up-slate.png)');                         
}
});

and here is the html table.....

<table class="summary_content_table">
<tbody>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>
    </tr>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>
    </tr>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>
    </tr>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>
    </tr>
    <tr class="totalRow">
        <td colspan="2"><span class="clickme">Hide</span><strong>TEXT</strong></td>
        <td class="lt">0</td>    
    </tr>
    <tr>
        <td  class="totalSubRow" colspan="2">text</td>
        <td class="lt">$0</td>    
    </tr>      
  </tbody>
</table>

and here is the css...

table.summary_content_table td span.clickme {
padding: 0 19px 0 0;
float: right;
font-weight: bold;
cursor: pointer;
background: `#FFF url(../images/arrows/arrow-nav-up-slate.png) no-repeat right;

}

I tried several approaches including what I've found here and here, but I can't seem to single out one of the links. When I click them ALL of the arrows point up and if I click it again ALL of the arrows point down. I want ONLY the link I clicked to change background image.

Thank you for any suggestions.

Community
  • 1
  • 1
user691607
  • 1
  • 2

1 Answers1

1

You should really use jQuery's delegate method instead of binding the same handler function to every single row:

$('.summary_content_table').delegate('.totalRow', 'click', function() {
    var $clickme = $('.clickme', this);

    $(this).nextUntil('.totalRow').each(function() {
        $(this).toggle(50);
    });

    if ( $clickme.not(':contains("Show")').length ) {
        $clickme.text('Show')
            .css({backgroundImage: 'url(... v-down-slate.png)'});
    } else {
        $clickme.text('Hide')
            .css({backgroundImage: 'url(... v-up-slate.png)'});
    }
});
aefxx
  • 24,835
  • 6
  • 45
  • 55