About Collapsable Tables

[Jake Bunce]

I tested the old instructions on version 3.5 and they work exactly the same. Here are the old instructions in an improved format:

Basic Collapsable Table Code

This code can be used "as is" in your templates to create a collapsable table. Change the TABLE TITLE and STUFF THAT IS HIDDEN parts appropriately:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr>
		<td class="[color=green]tcat[/color]">
			[color=blue]<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('[color=red]my_table[/color]')"><img id="collapseimg_[color=red]my_table[/color]" src="$stylevar[imgdir_button]/collapse_[color=green]tcat[/color]$vbcollapse[collapseimg_[color=red]my_table[/color]].gif" alt="" border="0" /></a>[/color]
			[b]TABLE TITLE[/b]
		</td>
	</tr>
</thead>
<tbody [color=purple]id="collapseobj_[color=red]my_table[/color]" style="$vbcollapse[collapseobj_[color=red]my_table[/color]]"[/color]>
	<tr>
		<td class="alt1">
			[b]STUFF THAT IS HIDDEN WHEN THE TABLE IS COLLAPSED[/b]
		</td>
	</tr>
</tbody>
</table>

This code will create a collapsable table that remembers its state (open or closed).

Details

The red code (my_table) is the identifier of the collapsable page element. This identifier must be consistent throughout the code. It must also be unique to this collapsable table; if you create multiple collapsable tables on your forums, then each one needs to have a unique identifier.

The blue code represents the little collapse button that shows in the top right side of the table. Users can click this button to collapse or expand the table. With the exception of the red identifier inside of this code, generally you will want to leave the blue code as it appears above.

The green code (tcat) represents the style of the title bar of the table and is used in two places... once to set the class for the title "td", and once inside of the blue code for the path of the collapse image. These two instances should be the same, usually tcat or thead depending on the style you want to use for the title bar.

Like the blue code, the purple code is pretty standard stuff that you will want to leave alone. The id="" tag uses the red identifier to identify itself as the page element that is collapsed when the collapse image is clicked. The style="" tag contains the $vbcollapse[collapseobj_my_table] variable which parses to nothing or display: none; depending on if the table is collapsed or not.

Special Cases

Table That Is Always Collapsed

If you want the table to always be collapsed by default, then you can change the style tag like this:

<tbody [color=purple]id="collapseobj_[color=red]my_table[/color]" style="display: none;"[/color]>

...resulting in this complete table code which can be used "as is":

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr>
		<td class="[color=green]tcat[/color]">
			[color=blue]<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('[color=red]my_table[/color]')"><img id="collapseimg_[color=red]my_table[/color]" src="$stylevar[imgdir_button]/collapse_[color=green]tcat[/color]$vbcollapse[collapseimg_[color=red]my_table[/color]].gif" alt="" border="0" /></a>[/color]
			[b]TABLE TITLE[/b]
		</td>
	</tr>
</thead>
<tbody [color=purple]id="collapseobj_[color=red]my_table[/color]" style="display: none;"[/color]>
	<tr>
		<td class="alt1">
			[b]STUFF THAT IS HIDDEN WHEN THE TABLE IS COLLAPSED[/b]
		</td>
	</tr>
</tbody>
</table>

Collapsable Table In The postbit Template

Using the postbit template for example... remember that each collapsable table needs to have a unique identifier. If you add a collapsable table to the postbit then it will show up several times on a thread page. You can use a variable in the identifier to ensure that each table is unique.

In the postbit you can use the $post[postid] variable in the identifier. You also need to use the global scope for the $vbcollapse[] / $vbcollapse[] arrays in most of the "bit" templates, including the postbit. To use a variable identifier as well as the global scope, you need to change the syntax slightly (additional code bits in brown).

This code uses $post[postid] in the identifier and will work "as is" in the postbit template:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr>
		<td class="[color=green]tcat[/color]">
			[color=blue]<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('[color=red]my_table_$post[postid][/color]')"><img id="collapseimg_[color=red]my_table_$post[postid][/color]" src="$stylevar[imgdir_button]/collapse_[color=green]tcat[/color][color=brown]{[/color]$[color=brown]GLOBALS['[/color]vbcollapse[color=brown]'][/color][[color=brown]'[/color]collapseimg_[color=red]my_table_[color=brown]' .[/color] $post[postid][/color]][color=brown]}[/color].gif" alt="" border="0" /></a>[/color]
			[b]TABLE TITLE[/b]
		</td>
	</tr>
</thead>
<tbody [color=purple]id="collapseobj_[color=red]my_table_$post[postid][/color]" style="[color=brown]{[/color]$[color=brown]GLOBALS['[/color]vbcollapse[color=brown]'][/color][[color=brown]'[/color]collapseobj_[color=red]my_table_[color=brown]' .[/color] $post[postid][/color]][color=brown]}[/color]"[/color]>
	<tr>
		<td class="alt1">
			[b]STUFF THAT IS HIDDEN WHEN THE TABLE IS COLLAPSED[/b]
		</td>
	</tr>
</tbody>
</table>

If you need another special case explained, post a thread or send me a PM and I will add it.

[Jake Bunce]

Bump. I went ahead and reposted the same instructions in an improved format.