CODEWITHSUNDEEP
jquery
apg1985
apg1985

Reputation: 1

Jquery problem - cant expand the row above in a table

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(); 
    } 
)

});

Upvotes: 0

Views: 104

Answers (3)

Mottie
Mottie

Reputation: 86453

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

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

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630569

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(); 
  });
});

Upvotes: 0

karim79
karim79

Reputation: 342695

Try this:

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

Upvotes: 0

Related Questions