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.

Tags:

Jquery