Collapsable area... inside another collapsable area?

[PntSingularity]

Been trying to do this with <tbody> using vB's standard collapse thingie.

I've got a db with info I'm fetching, and would like it in multiple collapsable areas. However, as soon as I'm adding collapse-code for the child data it starts acting weird and won't show the children at all.


Storage Box
ID DATA
1 Example1
2 Example2
->Child1
->Child2
3 Example3
->Child1
4 Example4


Collapsed it looks like:

Storage Box


...and I want the children to be able to collapse too:

Storage Box
ID DATA
1 Example1
2 Example2
3 Example3
4 Example4


EDIT:
Btw, I need to be able to collapse the whole thing, so removing that part isn't an option.

[calorie]

Look at the "What's Going On" box on the forum homepage, and then look for <!-- what's going on box --> in the HTML source of the forum homepage to see how to collapse the exampleX sections. Once you have that set, then try wrapping the whole thing with another collapsible bit. The page here (http://www.vbulletin.com/docs/html/templates_collapsing_elements) might also help.

[PntSingularity]

Look at the "What's Going On" box on the forum homepage, and then look for <!-- what's going on box --> in the HTML source of the forum homepage to see how to collapse the exampleX sections. Once you have that set, then try wrapping the whole thing with another collapsible bit. The page here (http://www.vbulletin.com/docs/html/templates_collapsing_elements) might also help.

That's basically what I did and it didn't work.

[sockwater]

It works fine for me. Just make sure you get all your ids right.

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="180">
<thead>
<tr>
<td class="thead">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('MYBOX')"><img id="collapseimg_MYBOX"

src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_MYBOX].gif" alt="" border="0" /></a>
TITLE HERE
</td>
</tr>
</thead>
<tbody id="collapseobj_MYBOX" style="$vbcollapse[collapseobj_MYBOX]">
<tr>
<td class="alt1" nowrap="nowrap">

<!-- begin inner collapsible table -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="180">
<thead>
<tr>
<td class="thead">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('MYBOX2')"><img id="collapseimg_MYBOX2"

src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_MYBOX2].gif" alt="" border="0" /></a>
TITLE HERE
</td>
</tr>
</thead>
<tbody id="collapseobj_MYBOX2" style="$vbcollapse[collapseobj_MYBOX2]">
<tr>
<td class="alt1" nowrap="nowrap">CONTENTS HERE</td>
</tr>
</tbody>
</table>
<!-- end inner collapsible table -->

</td>
</tr>
</tbody>
</table>

[PntSingularity]

Ok, I got this to work now. I now have the collapse code on my <tr> tags and it seems to work so far while inside another collapsible menu.

Is there an advantage to using tbody tags?

It might be that I'm unused to tbody thead etc. that caused the problem. I read that you need to use all three (head body foot) if using it, so since I wasn't that might have been the cause.


EDIT:
Since putting the collapse part on the tr only collapses one row I redid it again with thead, tbody, etc and it wouldn't work.
I decided to have another look at your code sockwater and now discovered that the problem with my code is that my collapsible menus are in the same <table>... so thanks socky! :)

Since adding new <table>'s would change the layout of my plugin... is there any other tag I can use to wrap around multiple <tr> and make them collapse?

[sockwater]

You can have multiple <tbody>s in a table.

<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>

[PntSingularity]

You can have multiple <tbody>s in a table.

<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>

Hmm, didn't work with the collapse feature when I did... maybe it's cos I had two <head>s as well... but then, I'm sure I didn't have any <head> at all the first time I tried and it didn't work.

Anyways I rewrote my code and am using multiple tables instead now (no tbody, thead, etc at all), except for one part it actually looks alot better now.