I have a table layout that I am using as a navigation bar. It's like a tree-menu where some rows are headers for the ones below it. It goes a little like this (some tags removed for readability):
<table id = "QLM">
<tbody>
<tr id = "QLM0">
<tr style = "display: table-row">
<tr id = "QLM2">
<tr style = "display: table-row">
<tr id = "QLM3">
<tr style = "display: table-row">
<tr id = "QLM4">
<tr style = "display: table-row">
</tbody>
</table>
Each row contains a <td>
with another table inside.
I have some jQuery which shows and hides the rows when you click on the rows above them (i.e. click the ones with IDs to hide/show the ones with style tags).
The only thing is, I want it so that when one (id) row is shown, the others (the style rows) are all hidden.
This is my jQuery so far:
menuHd.click(function() {
var styleElm = $(this).find("td:last");
var nextTR = $(this).next("tr:not([id])");
if (nextTR.is(':visible')) {
nextTR.hide();
styleElm.css(cssClosed);
} else {
nextTR.show();
styleElm.css(cssOpen);
}
});
Total jQuery newb, so go easy on me!
Thanks in advance, folks.