Using jQuery to find the next table row
Nobody has any love for the ternary operator? :) I understand readability considerations, but for some reason it clicks for me to write it as:
$(document).ready( function () {
$(".expand").click(function() {
$("img",this).attr("src",
$("img",this)
.attr("src")=="minus.gif" ? "plus.gif" : "minus.gif"
);
$(this).parent().next().toggle();
});
});
...and has the benefit of no extraneous classes.
I had to solve this problem recently, but mine involved some nested tables, so I needed a more specific, safer version of javascript. My situation was a little different because I had contents of a td and wanted to toggle the next TR, but the concept remains the same.
$(document).ready(function() {
$('.expandButton').click(function() {
$(this).closest('tr').next('tr.expandable').fadeToggle();
});
});
Closest grabs the nearest TR, in this case the first parent. You could add a CSS class on there if you want to get extremely specific. Then I specify to grab the next TR with a class of expandable, the target for this button. Then I just fadeToggle()
it to toggle whether it is displayed or not. Specifying the selectors really helps narrow down what it will handle.
You don't need the show and hide tags:
$(document).ready(function(){
$('.expand').click(function() {
if( $(this).hasClass('hidden') )
$('img', this).attr("src", "plus.jpg");
else
$('img', this).attr("src", "minus.jpg");
$(this).toggleClass('hidden');
$(this).parent().next().toggle();
});
});
edit: Okay, I added the code for changing the image. That's just one way to do it. I added a class to the expand attribute as a tag when the row that follows is hidden and removed it when the row was shown.