JQuery Navigation Table. Showing and hiding every other row?

Question

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.

Answer 1

You could use the :even selector to select the ID'd rows and the :odd selector to select the style rows, since they always change between each other.

(Edit: Even comes first, because selecting is zero-based, according to the documentation)

Answer 2

try this

$("tr:not([id])").hide();

before

nextTR.show();

in ur code. this should solve ur problem and will hide all other rows without id attribute before showing current row. not tested though