Please help me understand jquery .next()

I am trying to set up an expandable / collapsible grid(table), and trying to use jquery to help. Although, I am a complete noob when it comes to javascript and jquery.

the html structure looks something like:

[code=html]
<ul>
<li class=”toggle”>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</table>
<ul>
<li>
<table>
<tr>
<td>Result1</td>
<td>Result2</td>
<td>Result3</td>
<td>Result4</td>
</tr>
</table>
</li>
</ul>
</li>
</ul>
[/code]

I am using an asp page to query results and build page, so the number of results and level could be endless.
I thought to use a table to keep that grid / spreadsheet structure and look, but there may be better ways.

jquery looks like:

[CODE]
$(function() {

// hide all the sub-menus
$(“li.toggle”).next().hide();

// set the cursor of the toggling span elements
$(“li.toggle”).css(“cursor”, “pointer”);

// prepend a plus sign to signify that the sub-menus aren’t expanded
$(“li.toggle”).prepend(“+ “);

// add a click function that toggles the sub-menu when the corresponding
// span element is clicked
$(“li.toggle”).click(function() {
$(this).next().slideUp(“slow”);

/* switch the plus to a minus sign or vice-versa */
var v = $(this).html().substring( 0, 1 );
if ( v == “+” )
$(this).html( “-” + $(this).html().substring( 1 ) );
else if ( v == “-” )
$(this).html( “+” + $(this).html().substring( 1 ) );
});
});
[/CODE]

I am expecting jquery to collapse the table and ul under the li class “toggle”. However, I am getting mixed results depending how how I structure list. I thought jquery’s .next() with step through children of class “toggle” and hide them, but am I wrong on that?

Is the table screwing things up?
Is there a better way to do this?

Thanks for any help.

Also in #JavaScript _↴