Jquery problem - cant expand the row above in a table

Question

Hi People,

What I cant figure out is how I would toggle a row in a table using the one below it.

So say I have a table with 2 rows the first contains content and the one below contains a button, when the page loads the content row is hidden and when you click the button it toggles the content row on and off.

In the example the first table works but the second does not, I need the second one to work.

$(document).ready(function() { 
$(".sectionhead").toggle( 
    function() { 
            $(this).next("tr").hide(); 
    }, 
    function() { 
            $(this).next("tr").show(); 
    } 
) 

});

Answer 1

Try this:

$(document).ready(function() { 
    $(".sectionhead").each(function() {
        $(this).toggle( 
            function() { 
                $(this).next("tr").hide(); 
            }, 
            function() { 
                $(this).next("tr").show(); 
            } 
        ) 
    });
});

Answer 2

You can do this:

$(function() { 
  $("table").delegate(".sectionhead", "click", function() { 
    $(this).next("tr").toggle(); 
  });
});

If the table is dynamically loaded though, you'll need this:

$(function() { 
  $(".sectionhead").live("click", function() { 
    $(this).next("tr").toggle(); 
  });
});

Answer 3

Thanks for your quick replies guys but all did not work. Ive added code including table so you guys can get a better understand for what I want, I think i didnt explain properly.

$(document).ready(function() { 
$(".sectionhead").toggle( 
    function() { 
            $(this).next("tr.child").hide(); 
    }, 
    function() { 
            $(this).next("tr.child").show(); 
    } 
) 

});

<table>
<tr class="child"><td>child</td></tr>
<tr class="sectionhead"><td><img src="about-us-jquery.jpg" class="btn-slide"></td></tr>
</table>

Answer 4

You should be using .prev() instead of .next()

$(document).ready(function(){
 $(".sectionhead").toggle(
  function() {
   $(this).prev().hide();
  },
  function() {
   $(this).prev().show();
  }
 )
})