Announcement

Collapse
No announcement yet.

About Collapsable Tables

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • About Collapsable Tables

    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:

    Code:
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    <thead>
    	<tr>
    		<td class="tcat">
    			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('my_table')"><img id="collapseimg_my_table" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_my_table].gif" alt="" border="0" /></a>
    			TABLE TITLE
    		</td>
    	</tr>
    </thead>
    <tbody id="collapseobj_my_table" style="$vbcollapse[collapseobj_my_table]">
    	<tr>
    		<td class="alt1">
    			STUFF THAT IS HIDDEN WHEN THE TABLE IS COLLAPSED
    		</td>
    	</tr>
    </tbody>
    </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:

    Code:
    my_table_$post[postid]
    ...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:

    Code:
    <tbody id="collapseobj_my_table" style="display: none;">

  • #2
    Re:

    Originally posted by Jake Bunce
    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:
    my_table_$post[postid]
    ...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.
    Refer to this thread.

    When you use a variable in the identifier, you need to change the syntax slightly when the identifier is used as an array index (in two spots). Here is the updated code with _$var added to the identifier, and with the extra syntax highlighted in brown:

    Code:
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    <thead>
    	<tr>
    		<td class="tcat">
    			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('my_table_$var')"><img id="collapseimg_my_table_$var" src="$stylevar[imgdir_button]/collapse_tcat{$vbcollapse['collapseimg_my_table_' . $var]}.gif" alt="" border="0" /></a>
    			TABLE TITLE
    		</td>
    	</tr>
    </thead>
    <tbody id="collapseobj_my_table_$var" style="{$vbcollapse['collapseobj_my_table_' . $var]}">
    	<tr>
    		<td class="alt1">
    			STUFF THAT IS HIDDEN WHEN THE TABLE IS COLLAPSED
    		</td>
    	</tr>
    </tbody>
    </table>
    Besides just adding _$var to the identifier, the big changes to this code are:

    Code:
    .../collapse_tcat{$vbcollapse['collapseimg_my_table_' . $var]}.gif" alt=""...
    ...and:

    Code:
    ...style="{$vbcollapse['collapseobj_my_table_' . $var]}">...
    Notice how you have to add curly brackets around the $vbcollapse[] array - {...}. You also need to quote the string portion of the index - '...' - and concatenate the variable part of the index - . $var.

    **************************************************

    In addition to the above, some bit templates will require that you use the global scope to access the $vbcollapse[] array. This is done by using {$GLOBALS['vbcollapse'][]} instead. Here is updated code. Pay special attention to the two locations mentioned above:

    Code:
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
    <thead>
    	<tr>
    		<td class="tcat">
    			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('my_table_$var')"><img id="collapseimg_my_table_$var" src="$stylevar[imgdir_button]/collapse_tcat{$GLOBALS['vbcollapse']['collapseimg_my_table_' . $var]}.gif" alt="" border="0" /></a>
    			TABLE TITLE
    		</td>
    	</tr>
    </thead>
    <tbody id="collapseobj_my_table_$var" style="{$GLOBALS['vbcollapse']['collapseobj_my_table_' . $var]}">
    	<tr>
    		<td class="alt1">
    			STUFF THAT IS HIDDEN WHEN THE TABLE IS COLLAPSED
    		</td>
    	</tr>
    </tbody>
    </table>
    Templates that require the global scope include the forumhome_forumbit_* templates, and the various postbit templates, among others.

    I have tested this new code and it works. Thanks to Mike for his help in that thread.

    Comment

    widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
    Working...
    X