Question

In a table each column is clickable and reveals some content when clicked. Besides each column has a td which holds a button to hide the column. Like this

The hide part does not work for me. Obviously the reveal part is triggered first and hide is ignored/not fired.

$("tr td.remove").live("click", function(){
    $(this).parent("tr:first").hide('slow');
});

$(".reveal").click(function(){
    $(this).next(".content").slideToggle("fast");
});

HTML

 <table>
    <tr class="reveal">
       <td>300,00 €</td>
       <td class="remove">X</td>
    </tr>
    <tr class="content">
        <td colspan="2">
           Content
        </td>
    </tr>
 </table>

How can I combine this to accept both actions? I use jQuery 1.6.2.

fiddle: http://jsfiddle.net/2jVtC/1/

Answer 1

Here is working jsFiddle.

$('.content').hide();
$(".reveal").click(function() {
    $(this).next(".content").slideToggle("fast");
});
$("tr td.remove").live("click", function() {
    $(this).parent("tr").slideUp('slow');
    $(this).parent().next(".content").slideUp('slow');
});​

Alternative select

Note: If you are using jQuery 1.6.4, closest() method won’t work.

$(".reveal").click(function(){
    $(this).closest(".content").slideToggle("fast");
});