Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > Programming Articles
Reload this Page How To Create Collapsable Boxes
FAQ Members List Calendar Search Today's Posts Mark Forums Read

Reply
Page 3 of 3 12 3
 
Thread Tools
How To Create Collapsable Boxes
peterska2
Join Date: Oct 2003
Posts: 6,504

 

Manchester, UK
Show Printable Version Email this Page Subscription
peterska2 peterska2 is offline 06-28-2006, 10:00 PM
This tutorial explains how to create collapsable boxes throughout vBulletin.

For the purpose of this tutorial, I will explain how the first part of the 'What's Going On' box is structured (ie WOL on forumhome) and how you can use this technique to create stand alone collapsable boxes or add sections to additional boxes (eg Forum Statistics as part of the What's Going On box)

Part One: Decipering the What's Going On box

In your forumhome template, the following code exists by default:
Code:
<!-- what's going on box -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
    <tr>
        <td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
    </tr>
</thead>
<if condition="$show['loggedinusers']">
<!-- logged-in users -->
<tbody>
    <tr>
        <td class="thead" colspan="2">
            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
            <a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
        </td>
    </tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
    <tr>
        <td class="alt2"><a href="online.php$session[sessionurl_q]" rel="nofollow"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="$vbphrase[view_whos_online]" border="0" /></a></td>
        <td class="alt1" width="100%">
            <div class="smallfont">
                <div style="white-space: nowrap"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>
                <div>$activeusers</div>
            </div>
        </td>
    </tr>
</tbody>
<!-- end logged-in users -->
</if>
This is the section of the code that we are going to look at.

Firstly, you will notice that the code starts with a table row, the same as any other table anywhere in vBulletin. This is essential. However, before the
Code:
<tr>
there is an additional tag
Code:
<thead>
This tag is used to create a header row for any tables that contain collapsable boxes. Generally speaking, this is only used if the table is going to contain more than one collapsable item.

All the code until
Code:
</thead>
is the same as any other table row, so you whould already be familiar with that.

Next we have the condition for the content section to show. For the purposes of this tutorial, the conditional is being disregarded.

This is then followed by the following code:
Code:
<tbody>
    <tr>
        <td class="thead" colspan="2">
            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
            <a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
        </td>
    </tr>
</tbody>
There are a few important aspects in this section, so we shall look at each one in turn.

First there is the
Code:
<tbody>
This tells us that this is a new section in the table body. The codes
Code:
<tr>
and
Code:
<td>
you should already be familiar with. Normal classes and colspans can be used within these tags as usual.

The next section is essential
Code:
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
This creates the collapse image at the far right of the row, and controls the collasping of the section. By default this section is open, and the button will collapse it. We will look at the code to do the reverse later in this tutorial.

Probably the most important section of this code, and the bit that is the cause for most problems are the labels
Code:
forumhome_activeusers
and
Code:
collapseimg_forumhome_activeusers
These appear three times in this one section of code, the first one being used once, and the second being used twice. These are also used later, so it is essential that care to detail is taken here. You will notice that the difference between the two codes is the prefix of
Code:
collapseimg_
on the second one. The rest of the code is the same.

When you are creating a new collapsable box, you need to give it a name. The length of the name is not important, as long as you ensure that every time it is used, it is identical. In the example used for this tutorial (the WOL on forumhome) the name used is
Code:
forumhome_activeusers
which is pretty self explanatory. I recommend using similar explanatory names for your collaspable boxes. It is essential that this is entered exactly the same for each occurance in the code, otherwise your box will not function correctly.

Some examples of names for collapsable boxes are:
  • thishack
  • this_hack
  • page_hack
  • author_hack
  • author_page_hack
  • random_number
All the the above are perfectly acceptable for use as names for the boxes. You will have your own preference as to what you want to call them. Personally I prefer the format author_hack as it makes it easiest to see exactly what they are for.

The next section is
Code:
<a href="online.php$session[sessionurl_q]" rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
        </td>
    </tr>
</tbody>
which is pretty self explanatory. Basically, it contains the text to be displayed in the row including any links, if appropriate. It is then followed by closing tags for everything except the table. It is important that we do not close the table before we have added the next row, which is the collapsable content.

The next line is
Code:
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
You will notice that again there are two instances of
Code:
collapseobj_forumhome_activeusers
It is essential that these have the same name as the ones changed previously.

This line controls the collapsing of the box by identifying it, and setting the style of the box to match that of the image used earlier. (ie when collapsed the image shows a + and when expanded the image shows a - )

To have the box collapsed by default, you should use
Code:
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]; display:none">
However, any users that do not have javascript enabled will not be able to open these boxes.

Finally, we have the content for the collapsable row, followed by the closure tag
Code:
</tbody>
To end the table you would also add
Code:
</table>
after this.


Part Two: Creating Standalone Collapsable Boxes

Creating a standalone collapsable box (eg the one used for topXstats) is very straightforward. Literally, it involves following all the steps layed out in part one, using the same code and making adjustments as highlighted for the box name and setting the title and content to your requirements.

Using the
Code:
<thead>
section is optional. However, I would only use it if you are creating two or more associated collaspable sections within a table as the category sections (the part containing the collapse image) does not be hidden at any point.


Part Three: Adding To Existing Tables

You can add a collapsable section to any existing table. You simply use the steps laid out in part one, but omit the table and thead sections. You can place your collapsable section anywhere in a table, providing it is located in the center of the following code
Code:
</tr>
<tr>
This is to ensure that it is located correctly in a row in the table. Simply start with your first
Code:
<tbody>
and take it from there.

You can also add collapsable sections right at the beginning of a table by adding the code immediately after the table tag, or at the end of the table by adding the code directly above the end table tag.

An example of a modification that uses this technique is the Who Has Visited Today modification.


Part Four: Multiple Items Collapsing With One Control

Using the Whats Going On box as a primary example, what if you didn't want everything to be seperate, but rather all collapse apart from the statistics if you click a collapse icon?

This is very easy to do, and you simply use the same name for each section that you wish to have collapsed by the one icon. In this case, that would be the WOL section, upcoming events and birthdays. Statistics would retain it's own name otherwise that two would collapse with the rest.



I hope that you find this useful, and if you have any questions, please feel free to ask.
Reply With Quote
  #22  
Old 02-28-2007, 12:33 PM
Mutt's Avatar
Mutt Mutt is offline
 
Join Date: Nov 2001
Posts: 331
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Kerry-Anne View Post
Part Four: Multiple Items Collapsing With One Control

Using the Whats Going On box as a primary example, what if you didn't want everything to be seperate, but rather all collapse apart from the statistics if you click a collapse icon?

This is very easy to do, and you simply use the same name for each section that you wish to have collapsed by the one icon. In this case, that would be the WOL section, upcoming events and birthdays. Statistics would retain it's own name otherwise that two would collapse with the rest.



I hope that you find this useful, and if you have any questions, please feel free to ask.
i know this is a little old but i figured i'd try anyway.

i have 3 divs that I want opened and closed w/ one click. even though all 3 have the same name, only the first div is opening.

here's my calendar event RSVP template

Code:
<if condition="!$eventempty">
	<hr>
</if>

<if condition="$rsvp_yes || $rsvp_maybe || $rsvp_no"><a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('group_rsvp')"><img id="collapseimg_group_rsvp" alt="Show/Hide Users" src="$stylevar[imgdir_button]/collapse_alt_collapsed.gif" alt="" border="0" /></a></if>
<if condition="$rsvp_yes">
	<b>$vbphrase[calendar_rsvpd] $vbphrase[yes]: $rsvp_yes_count </b>
	<if condition="$eventinfo[rsvp_max_guests]">
		(<phrase 1="$rsvp_yes_members" 2="$rsvp_yes_guests">$vbphrase[x_members_and_y_guests]</phrase>)
	</if>
	<div id="collapseobj_group_rsvp" style="display: none;"><ul><if condition="$vboptions[rah_rsvp_showavatar]"><table>$rsvp_yes</table><else />$rsvp_yes</if></ul></div>
</if>
<if condition="$rsvp_maybe">
	<b>$vbphrase[calendar_rsvpd] $vbphrase[maybe]: $rsvp_maybe_count</b> 
	<if condition="$eventinfo[rsvp_max_guests]">
		(<phrase 1="$rsvp_maybe_members" 2="$rsvp_maybe_guests">$vbphrase[x_members_and_y_guests]</phrase>) 
	</if>
	<div id="collapseobj_group_rsvp" style="display: none;"><ul><if condition="$vboptions[rah_rsvp_showavatar]"><table>$rsvp_maybe</table><else />$rsvp_maybe</if></ul></div>
</if>
<if condition="$rsvp_no">
	<b>$vbphrase[calendar_rsvpd] $vbphrase[no]: $rsvp_no_count</b>
	<div id="collapseobj_group_rsvp" style="display: none;"><ul><if condition="$vboptions[rah_rsvp_showavatar]"><table>$rsvp_no</table><else />$rsvp_no</if></ul></div>
</if>
it's not an option to use 1 div. I want to list the RSVP counts but hide the users & comments.

if anyone knows what i'm doing wrong, I'd love the help. thanks
Reply With Quote
  #23  
Old 03-05-2007, 01:07 PM
Mutt's Avatar
Mutt Mutt is offline
 
Join Date: Nov 2001
Posts: 331
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I really need help on this. anyone?

I have the divs setup individually with no problem. my issue is trying to have multiple divs oven with one click. i gave all the divs the same id but only the first one opens & closes

the code is quoted above
Reply With Quote
  #24  
Old 08-15-2007, 09:24 PM
ravyn's Avatar
ravyn ravyn is offline
 
Join Date: Sep 2006
Location: Imaginary Space
Posts: 38
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I've created a left-column menu thingy (I know.... such technical terms... lol) with collapsable boxes, but they don't quite act like the collapsable boxes on the rest of the site. I mean, I got them to work, and I even used the display: none thing to make them collapsed upon page loads, but the rest of the boxes (What's going on box and forum category boxes) will remember when they have been collapsed. Sometimes I will collapse boxes and as I return to the forum home page, they will remain collapsed, but the side menu boxes don't remember. They will either be open or closed depending on whether I have added the display:none thing in the style variable, but not dependant on whether I have opened or closed them before. Is there a reason for this?
Reply With Quote
  #25  
Old 12-18-2008, 03:19 AM
ewelin ewelin is offline
 
Join Date: Dec 2007
Location: Cambridge, MA
Posts: 22
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Buraq View Post
dang....that sucks

Is there ANY way around this? Is it possible to have any other variable in there? like...
Code:
src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_postbit_userinfo$x].gif"
where I define $x outside?
Buraq, there is a way around this, if you're still looking for a solution. Or if anyone happens to be looking for the same solution. Only drawback is you have to be willing to edit some php code as well. Take a look at the template forumhome_forumbit_level1_nopost
Code:
<tbody>
    <tr>
        <td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
            <if condition="$childforumbits">
            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
            </if>
            <a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
            <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
            <if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
        </td>
    </tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
$childforumbits
</tbody>
</if>
I've highlighted the variables they use. In the php file, in this case, includes\functions_forumlist.php they generate that variables with the code starting on line 377
Code:
            if ($depth == 1 AND $tempext == '_nopost')
            {
                global $vbcollapse;
                $collapseobj_forumid =& $vbcollapse["collapseobj_forumbit_$forumid"];
                $collapseimg_forumid =& $vbcollapse["collapseimg_forumbit_$forumid"];
                $show['collapsebutton'] = true;
            }
Now I have a custom php file for my site and was able to mimick this into that file as well as it's bit template. Hope someone else finds this useful.
Reply With Quote
  #26  
Old 04-30-2009, 03:25 AM
Vangerltd Vangerltd is offline
 
Join Date: Oct 2008
Posts: 14
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
bump for ravyn's (#23) question
Reply With Quote
  #27  
Old 05-26-2009, 10:29 PM
AlphaNation AlphaNation is offline
 
Join Date: May 2009
Posts: 1
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by ravyn View Post
Sometimes I will collapse boxes and as I return to the forum home page, they will remain collapsed, but the side menu boxes don't remember. They will either be open or closed depending on whether I have added the display:none thing in the style variable, but not dependant on whether I have opened or closed them before. Is there a reason for this?
There's 2 tricks to remember the state of a collapsed element.
1 - Using unique variables and the tricks involved in naming them.
2 - Some places require you to reference the GLOBAL to get the collapsed state from the cookie.

To do something like collapse a post.
Button:
Code:
<a href="#top" style="float:$stylevar[right]"
   onclick="return toggle_collapse('post_$post[postid]')">
   <img id="collapseimg_post_$post[postid]"
   src="$stylevar[imgdir_button]/collapse_thead{$GLOBALS['vbcollapse']['collapseimg_post_'.$post[postid]]}.gif" 
   alt="Collapse/Expand" border="0" /></a>
Table:
Code:
<table width="100%" align="right" border="0" cellpadding="0" cellspacing="0">
<tbody id="collapseobj_post_$post[postid]"
   style="{$GLOBALS['vbcollapse']['collapseobj_post_'.$post['postid']]}">
Stuff to hide.
</tbody>
</table>
Without using $GLOBALS['vbcollapse'], it won't get the information from the cookie.
Reply With Quote
  #28  
Old 07-10-2009, 02:02 AM
Vangerltd Vangerltd is offline
 
Join Date: Oct 2008
Posts: 14
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
AlphaNation, thanks!
Reply With Quote
  #29  
Old 01-09-2010, 06:34 AM
Hell Bomb Hell Bomb is offline
 
Join Date: Jun 2009
Posts: 385
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
lol thank you so much, i spent about 2 hours trying to figure out how to get collapsible boxes working right, and about 10 minutes after i am done i come here and see your tutorial anyways thanks, This will save people a lot of time.
Reply With Quote
  #30  
Old 01-04-2011, 12:07 PM
final kaoss final kaoss is offline
 
Join Date: Apr 2006
Posts: 1,314
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks, I spent some time too, trying to get the boxes working.
Reply With Quote
  #31  
Old 08-17-2012, 12:18 AM
Kiran-E-Sehar Kiran-E-Sehar is offline
 
Join Date: Jan 2011
Posts: 139
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
the default code is changed in 4.1.11
what to do?
Reply With Quote
Reply
Page 3 of 3 12 3

« Previous Thread | Next Thread »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 09:16 AM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04468 seconds
  • Memory Usage 2,343KB
  • Queries Executed 27 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (28)bbcode_code
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (11)post_thanks_box
  • (1)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete