Jquery problem - cant expand the row above in a table
Posted
by apg1985
on Stack Overflow
See other posts from Stack Overflow
or by apg1985
Published on 2010-04-12T10:10:47Z
Indexed on
2010/04/12
10:13 UTC
Read the original article
Hit count: 302
jQuery
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.
<!DOCTYPE HTML>
<html>
<head>
<title>Testing Horizontal Accordion</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".sectionhead").toggle(
function() {
$(this).next("tr").hide();
},
function() {
$(this).next("tr").show();
}
)
});
</script>
</head>
<body>
<table>
<tr class="sectionhead"><td></td></tr>
<tr class="child"><td>child</td></tr>
</table>
<br>
<table>
<tr class="child"><td>child</td></tr>
<tr class="sectionhead"><td></td></tr>
</table>
</body>
</html>
© Stack Overflow or respective owner
