javascript toggle table row background color on click

Question

So i have some javascript code which on a table row click exapnds all subsequent table rows until it finds the same table row class again.

If you hover over a row it changes to gray which is what i expected.

The only stuff that doesn't work is when you click on the table row, i want the table row background color to be same as the hover (gray). the color should disappear when you click back and collapse the row.

I tried to add a toggle class as seen below.

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("tr.my-class.negative.clicked");
});

But I am not sure if that is the right approach. Here is my jsfiddle: http://jsfiddle.net/DhdRG/3/

Answer 1

Just an heads up. This worked too and this might be a better solution:

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("clicked");

});

http://jsfiddle.net/DhdRG/7/

Answer 2

You can toggle the class with the same event

DEMO http://jsfiddle.net/kevinPHPkevin/DhdRG/4/

$('.composite-test').toggleClass("grey");

Answer 3

You could try $(this).removeClass('tr.my-class').addClass('tr.my-class.negative.clicked'); instead of $(this).toggleClass('tr.my-class.negative.clicked') But replace $(this) with the clicked tr's id.

Answer 4

You can toggle another CSS class to have the table row background color to be same as the hover (gray). http://jsfiddle.net/DhdRG/5/

$('.my-class').click(function(){

    $(this).nextUntil('tr.my-class').slideToggle(100);
    $(this).toggleClass("tr.my-class.negative.clicked");
    $(this).toggleClass("rowBg"); // added this line
});

---

CSS

.rowBg { background:gray;}