Tweet
This post explains how to make a basic collapsable table, and points out some of the details you need to be aware of.
Here is some basic code that you can use in the vBulletin templates to create a collapsable table:
This code will create a collapsable table that remembers its state (open or closed).
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.
Also, regarding the red identifier... if you want to create a collapsable table in one of the "bit" templates, where the template has multiple instances on a page (like the postbit), then you can use a variable in the identifier to make each instance unique. For example, in the postbit you can use this for the identifier:
...because each post has a unique postid, you can use the $post[postid] variable to create a unique identifier for each collapsable table in each post.
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. If you want the table to always be collapsed by default, then you can change the style tag like this:
Here is some basic code that you can use in the vBulletin templates to create a collapsable table:
Code:
<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]
TABLE TITLE
</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">
STUFF THAT IS HIDDEN WHEN THE TABLE IS COLLAPSED
</td>
</tr>
</tbody>
</table>
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.
Also, regarding the red identifier... if you want to create a collapsable table in one of the "bit" templates, where the template has multiple instances on a page (like the postbit), then you can use a variable in the identifier to make each instance unique. For example, in the postbit you can use this for the identifier:
Code:
[color=red]my_table_$post[postid][/color]
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. If you want the table to always be collapsed by default, then you can change the style tag like this:
Code:
<tbody [color=purple]id="collapseobj_[color=red]my_table[/color]" style="display: none;"[/color]>
Comment