Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
How To Create Collapsable Boxes
peterska2
Join Date: Oct 2003
Posts: 6,504

Manchester, UK
by peterska2 peterska2 is offline 29 Jun 2006

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:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

there is an additional tag
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

There are a few important aspects in this section, so we shall look at each one in turn.

First there is the
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This tells us that this is a new section in the table body. The codes
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

you should already be familiar with. Normal classes and colspans can be used within these tags as usual.

The next section is essential
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

and
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

You will notice that again there are two instances of
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

To end the table you would also add
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

This is to ensure that it is located correctly in a row in the table. Simply start with your first
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
Views: 14728
Reply With Quote
Comments
  #2  
Old 01 Jul 2006, 15:55
Justine's Avatar
Justine Justine is offline
 
Join Date: Jun 2006
wow .. I just noticed that you have numerous articles for us newbies.


thank you
Reply With Quote
  #3  
Old 02 Jul 2006, 05:48
Kirk Y's Avatar
Kirk Y Kirk Y is offline
 
Join Date: Apr 2005
Is it possible to display text in place of the image for the collapse button?
__________________
Former vBulletin.org Staff Member

Please feel free to re-use any of the code in any of my projects submitted to vB.org, so long as original attribution is retained.
Reply With Quote
  #4  
Old 02 Jul 2006, 23:35
peterska2 peterska2 is offline
 
Join Date: Oct 2003
Real name: Kerry-Anne (really!)
I don't see why not, but I haven't experimented with it so I'm not sure how easy it will be to implement.
__________________
Kerry-Anne
Previously known as peterska2

My Sites: peterska2.co.uk Super Clickers World News Zone English Football League Popular Usenet Groups
Do NOT PM or email me for Support or Modification Requests - No Exceptions!!
I do NOT do custom requests. Do not ask for them. - No Exceptions!!
Reply With Quote
  #5  
Old 03 Jul 2006, 00:10
Kirk Y's Avatar
Kirk Y Kirk Y is offline
 
Join Date: Apr 2005
Well getting the text to show in place of the image is easy, it's getting it to change with the status of the container.
__________________
Former vBulletin.org Staff Member

Please feel free to re-use any of the code in any of my projects submitted to vB.org, so long as original attribution is retained.
Reply With Quote
  #6  
Old 03 Jul 2006, 17:12
Antivirus's Avatar
Antivirus Antivirus is offline
 
Join Date: Sep 2004
Nice job peterska2! I just love collapsible tables, i try to use em anywhere i can to make the best use of space, etc... I recently posted a how-to for developers on including them in the admincp for new hacks, etc... It can be seen at http://www.vbulletin.org/forum/showthread.php?t=118696 if anyone's interested.
__________________
Please feel free to PM me about custom work, installations, and upgrades!

Eclipse Records - Streetcult Street Team
Reply With Quote
  #7  
Old 22 Jul 2006, 13:40
SiriusBlack22's Avatar
SiriusBlack22 SiriusBlack22 is offline
 
Join Date: Jun 2006
Real name: John
What code would I insert into the what's going on table to make it collapsible? I got rather lost there.
Reply With Quote
  #8  
Old 22 Jul 2006, 16:11
peterska2 peterska2 is offline
 
Join Date: Oct 2003
Real name: Kerry-Anne (really!)
part three tells you how to add to existing tables, such as the whats going on box, and part one explains how to set one up.
__________________
Kerry-Anne
Previously known as peterska2

My Sites: peterska2.co.uk Super Clickers World News Zone English Football League Popular Usenet Groups
Do NOT PM or email me for Support or Modification Requests - No Exceptions!!
I do NOT do custom requests. Do not ask for them. - No Exceptions!!
Reply With Quote
  #9  
Old 22 Jul 2006, 18:03
SiriusBlack22's Avatar
SiriusBlack22 SiriusBlack22 is offline
 
Join Date: Jun 2006
Real name: John
Done.

Thanks.

Actually I did it and got a bunch of weird errors! And it was collapsing different boxes, it was a mess.

I still don't fully understand where to put it...

Last edited by SiriusBlack22; 22 Jul 2006 at 21:58. Reason: Automerged Doublepost
Reply With Quote
  #10  
Old 22 Jul 2006, 23:11
peterska2 peterska2 is offline
 
Join Date: Oct 2003
Real name: Kerry-Anne (really!)
Start a new thread with what you want to add and where you want it and also what you had done and I'll give it a look over later.
__________________
Kerry-Anne
Previously known as peterska2

My Sites: peterska2.co.uk Super Clickers World News Zone English Football League Popular Usenet Groups
Do NOT PM or email me for Support or Modification Requests - No Exceptions!!
I do NOT do custom requests. Do not ask for them. - No Exceptions!!
Reply With Quote
  #11  
Old 13 Aug 2006, 06:35
Buraq's Avatar
Buraq Buraq is offline
 
Join Date: Nov 2004
I hate to dig this up, but how do you make the box collapsed by default? I read something in another thread, it does the job, but then it still shows the "collapse" button by default instead of the "expand" button.
Reply With Quote
  #12  
Old 13 Aug 2006, 06:41
Kirk Y's Avatar
Kirk Y Kirk Y is offline
 
Join Date: Apr 2005
As Kerry-Anne posted above:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

It's not a good idea to use this though, as users with Javascript disabled won't be able to expand the container.
__________________
Former vBulletin.org Staff Member

Please feel free to re-use any of the code in any of my projects submitted to vB.org, so long as original attribution is retained.
Reply With Quote
  #13  
Old 14 Aug 2006, 03:12
Buraq's Avatar
Buraq Buraq is offline
 
Join Date: Nov 2004
Originally Posted by acidburn0520
As Kerry-Anne posted above:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

It's not a good idea to use this though, as users with Javascript disabled won't be able to expand the container.
That's exactly what I did, but like I said above, it shows the wrong button for collapsing. Is there any other way to do this?

Now I know nothing about javascript, but since this seems to be a JS function, is it possible to do something like toggle_collapse in <body onload>? So it collapses the box when the page loads, and then you'd have to click the button to collapse?

Last edited by Buraq; 14 Aug 2006 at 09:19.
Reply With Quote
  #14  
Old 14 Aug 2006, 10:45
peterska2 peterska2 is offline
 
Join Date: Oct 2003
Real name: Kerry-Anne (really!)
I'm hoping that you did read the enitre tutorial, and not literally use that code that Kirk quoted, as that won't work correctly as it is the control for another box.

Can you provide a copy of the code you are using for the box, along with details of where it is and a link to view it on your site, and I'll give it a look over for you.
__________________
Kerry-Anne
Previously known as peterska2

My Sites: peterska2.co.uk Super Clickers World News Zone English Football League Popular Usenet Groups
Do NOT PM or email me for Support or Modification Requests - No Exceptions!!
I do NOT do custom requests. Do not ask for them. - No Exceptions!!
Reply With Quote
  #15  
Old 14 Aug 2006, 18:00
Buraq's Avatar
Buraq Buraq is offline
 
Join Date: Nov 2004
Originally Posted by peterska2
I'm hoping that you did read the enitre tutorial, and not literally use that code that Kirk quoted, as that won't work correctly as it is the control for another box.

Can you provide a copy of the code you are using for the box, along with details of where it is and a link to view it on your site, and I'll give it a look over for you.
I read the tutorial when I originally made collapsable boxes on my site (and they work fine), but when I came back for making them collapsed by default I just added the "display:none" (I payed attention to your tutorial ).

Currently you have to be an administrator to view the style I'm working on, and we're also in the process of upgrading to 3.6.0, so I'll get back to you guys later with screenshots. For now here's the code for the box...


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Note that I have built the collapsable box around the user info in my postbit_legacy template, which I've also modified in other ways.

Last edited by Buraq; 14 Aug 2006 at 18:03.
Reply With Quote
Reply

Similar Article
Article Author Type Replies Last Post
Add-On Releases [Hake] colors groups developed (boxes - ordinary colors - boxes region - color film ARB4HOSTING.COM Modification Graveyard 16 01 Feb 2008 11:46



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

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


New To Site? Need Help?

All times are GMT. The time now is 20:19.

Layout Options | Width: Wide Color: