Jquery problem - cant expand the row above in a table
- by apg1985
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>
