How To Create Collapsible Boxes

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • peterska2
    Senior Member
    • Oct 2003
    • 8869
    • 3.7.x

    How To Create Collapsible Boxes

    This tutorial explains how to create collapsible 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 collapsible 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 collapsible item.

    All the code until
    Code:
    </thead>
    is the same as any other table row, so you would 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 collapsing 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 collapsible 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 collapsible boxes. It is essential that this is entered exactly the same for each occurrence in the code, otherwise your box will not function correctly.

    Some examples of names for collapsible boxes are:
    • thisbox
    • this_box
    • page_box
    • 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 page_box 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 collapsible 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 collapsible row, followed by the closure tag
    Code:
    </tbody>
    To end the table you would also add
    Code:
    </table>
    after this.


    Part Two: Creating Standalone Collapsible Boxes

    Creating a standalone collapsible 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 collapsible 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 collapsible 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 collapsible 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 collapsible 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 separate, 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.
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...