Hide multiple table rows by class

Question

I've got a pretty large table of companies, these companies can have a daughter, these are listed underneath them. I want to be able to toggle each 'section' of daughters per company.

If a company has daughters, I added a <span class="image"> to each <td> which displays a image. If you click on the image, the rows of the daughters will be toggled.

The layout looks like this:

 <tr>
     <td><span class="image"></span>
     <td>Company</td>
 </tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr><td>Company</td></tr>
 <tr><td>Company</td></tr>
 <tr><td>Company</td></tr>
 <tr>
     <td><span class="image"></span>
     <td>Company</td>
 </tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>

 etc

So far I came up with this:

$('.image').click(function(){ 
    var closest = $(this).closest('tr')
    $('tr.company_daughter').each(function(){
            closest.hide();
        }
    );
});

Each company should only display her own daughters

However I seem not to be able to get the 'section' problem right.

Answer 1

The below code should what you want;

$('.image').click(function(){ 
    // get the clicked company row
    var closest = $(this).closest('tr');
    //give main company class "company"
    closest.nextUntil("tr.company").each(function(){
            //Every this means tr.company_daughter
            $(this).toggle();
        }
    );
});

Answer 2

I believe this will work, it will hide all company_daughter after that .image has been clicked:

$(".image").click(function() {
    $(this).closest("tr").nextUntil("tr:not(.company_daughter)").toggle();
});

Demo: http://jsfiddle.net/Rj5Ac/2/