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>
