Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
[HOW TO - vB4] Making Boxes Collapsible
cellarius
Join Date: Aug 2005
Posts: 1,965

Augsburg, Germany
by cellarius cellarius is offline 23 Aug 2009

Start:

OK, here's a small guide how to make a boxes/layers collapsible. Let's say, you have a simple div-container you want to make collapsible. The css ids and classes assigned to the elements are completely arbitrary.


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




Step 1: Adding "collapse"-class to surrounding container



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

The next line in the example establishes the container's header, in this case by means of a level 2 heading. This header will not be collapsed with the rest of the box but remain visible. This line can be left untouched.


Step 2: Adding id to what we want to hide

As a second step we have to add an unique id to the element that contains what we want to dissapear. Note: This element can be almost any html-tag that can be hidden (div, ul, ol, p, a - you get the idea). Note also: The element has to have an id that needs to be unique not only on the page, but on the whole site. So make sure you use some unique prefix, suffix or something like that (marked in blue).


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




Step 3: Adding collapse-button

Inside the header add the code for the collapse-button. You'll have to adapt it according to the id you assigned in step 2 (adaptions needed marked in blue). Make sure the part you add inside the image name variable is not the exact same as the id you added to the container that you want to hide. If you add the exact same, the button will vanish under certain circumstances, too:


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




Result:

In the end, the code will look like that:


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




Collapsed as default? Yes, but...

There is a way default the box to be collapsed by default. But this it's quick and dirty, and really not recommended to use. Basically, you have to add display:none to the style of the collapsing container, like so:


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

Now, there are two major drawbacks:
  • any user with javascript disabled will not be able to open the box, and the box will show the wrong icon.
  • vB at this point only saves information on closed boxes to a cookie; so if you reload the page, the box will always be closed, because vB will not remember that it has been opened.


Collapse more than one box at a time? Yes, but...

Now, functionally this is perfectly possible - just use the same id for every element you want to collapse together. But beware: for valid code you can't use duplicate ids on a page. So if you do that, your code will break xhtml validation!

I hope this will be useful for some of you!
-c

Please note that this article has been written first for alpha 1 version and been updated for beta 3. There still may be changes until gold. For example the button used is clearly marked as beta (_40b in the file name).

Last edited by cellarius; 15 Nov 2009 at 15:20.. Reason: Auto-Merged DoublePost
Views: 15399
Reply With Quote
Comments
  #2  
Old 20 Nov 2009, 14:43
SİMAR's Avatar
SİMAR SİMAR is offline
 
Join Date: Jun 2009
Real name: SİMAR
thanks
__________________
WwW.Stadt-Lahr.Com---www.stadt-lahr.com
Reply With Quote
  #3  
Old 05 Dec 2009, 11:19
xman_79 xman_79 is offline
 
Join Date: Jun 2006
Real name: Suleiman
Thanks,

if the user has JavaScript disabled, we can add :


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

Reply With Quote
  #4  
Old 29 Dec 2009, 06:07
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Do I have to use "class="collapse"" in my collapse/expand link?

Because when I do, it puts the link at the very top right of the post's and no matter where I move the link code in the template, it will always place it at the top right (near the inline moderation radio button area). And if I choose not to use class "collapse" then when I click the link it no longer collapse's/expand's but instead jumps to the top of the page.
Reply With Quote
  #5  
Old 29 Dec 2009, 07:57
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Real name: Sven
Yes, you need to use the collapse class. If you want to change locations etc., override it's settings or add an own class that overrides them.
__________________
Please note that there will be no further updates to my addons, especially they will not be upgraded for vB5. I'm leaving vB, since IB choose to go the banana-way yet again.

http://www.roma-antiqua.de
Reply With Quote
  #6  
Old 29 Dec 2009, 08:04
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Whenever I change the class for a custom one I made the expand/collapse function no longer works. See my thread here:

http://www.vbulletin.org/forum/showthread.php?t=231538
Reply With Quote
  #7  
Old 29 Dec 2009, 08:05
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Real name: Sven
You can assign more than one class to an element, like so: class="collapse yourclass".
__________________
Please note that there will be no further updates to my addons, especially they will not be upgraded for vB5. I'm leaving vB, since IB choose to go the banana-way yet again.

http://www.roma-antiqua.de

Last edited by cellarius; 29 Dec 2009 at 08:24.
Reply With Quote
  #8  
Old 29 Dec 2009, 08:08
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
Here is what Im working with:

<a class="collapse" style="text-decoration: none; color: grey;" id="collapse_cel_{vb:raw post.postid}" href="{vb:raw relpath}#">My System Specs <img src="http://www.WEBSITE.com/forum/images/styles/TW7S_vB4/images/arrow_down.gif"></a>
<noscript>You need to have JavaScript enabled so that you can use this ...</noscript>


<div id="cel_{vb:raw post.postid}" style="<--removed code--> display:none;">
If I change the <a class="collapse" to anything but collapse, it is no longer collapsible, its like there is a javascript that will only collapse stuff with that class.
Reply With Quote
  #9  
Old 29 Dec 2009, 08:28
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Real name: Sven
Having a second class works for me. Just tested once again using Firebug to add a second class to a standard collapsible box in vB4. Having "collapse test" on the a-tag around the collapse-button in posting pormissions box on showthread leaves functionality intact.
__________________
Please note that there will be no further updates to my addons, especially they will not be upgraded for vB5. I'm leaving vB, since IB choose to go the banana-way yet again.

http://www.roma-antiqua.de
Reply With Quote
  #10  
Old 01 Jan 2010, 20:30
SledgeHead SledgeHead is offline
 
Join Date: Oct 2006
Awesome! How would I go about adding a border and changing the background color? Also, I noticed the collapse button isn't centered vertically, but instead it touches the bottom. How do I adjust this?

Last edited by SledgeHead; 01 Jan 2010 at 20:41.
Reply With Quote
  #11  
Old 02 Jan 2010, 09:17
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Real name: Sven
Originally Posted by SledgeHead View Post
Awesome! How would I go about adding a border and changing the background color? Also, I noticed the collapse button isn't centered vertically, but instead it touches the bottom. How do I adjust this?
Coloring or bordering the box has nothing to do with this article's topic - you do it using .css, just as you would do for any other box. Go grab some basic .css tutorial on how to do this, explaining this here would lead too far, really.
To change positioning, you need to add an additional class as described in the postings right before yours to override the settings in collapse class.
__________________
Please note that there will be no further updates to my addons, especially they will not be upgraded for vB5. I'm leaving vB, since IB choose to go the banana-way yet again.

http://www.roma-antiqua.de
Reply With Quote
  #12  
Old 04 Jan 2010, 05:11
winstone winstone is offline
 
Join Date: Dec 2006
Originally Posted by TheWindows7Site View Post
Do I have to use "class="collapse"" in my collapse/expand link?

Because when I do, it puts the link at the very top right of the post's and no matter where I move the link code in the template, it will always place it at the top right (near the inline moderation radio button area).
apart from adding additional class overriding the existing properties, you can also add the CSS property of "position:relative;" to the container block so the "top:10px" will apply only to the container and not the whole page

Thanks for the article.
Reply With Quote
  #13  
Old 26 Jan 2010, 22:57
TimberFloorAu's Avatar
TimberFloorAu TimberFloorAu is offline
 
Join Date: May 2008
Real name: Blue
So tell me what is wrong with my code ?

<!--yobro modified collapse bookmarks code-->
<div class="options_block_container">
<vb:if condition="$bookmarksites">
<div class="options_block">
<div class="collapse">
<a class="collapse" id="social_bookmarks_list" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_bookmark_site}_40b.png" alt="" /></a>
<h4><span class="optiontitle">{vb:rawphrase bookmarks}</span></h4>
<div id="social_bookmarks_list" class="thread_info_block">
<h5 class="blocksubhead">{vb:rawphrase bookmarks}</h5>

<ul class="icon_list">{vb:raw bookmarksites}</ul>
</div>
</div></div>
</vb:if>
<!--yobro modified collapse bookmarks code-->
__________________

My Hacks [ click ] | Steve ~ Administrator for British Expats AustraliaBound.org/forum | Test our forum - user; don pass; pass123
Sports Tipping Mod - coming February 2010 ~ Show your Interest !
Reply With Quote
  #14  
Old 04 Feb 2010, 13:14
NLP-er's Avatar
NLP-er NLP-er is offline
 
Join Date: Aug 2008
Real name: Michał Podbielski
Example given in article forces the way how it will be displayed. I want to have collapsable blocks but without blockhead and having collapse image in place where I put it. Now it is not possible. Even if I remove classes blockhead and blockrow my collapse image is not in place where I put it but goes to right side and is inside of collapsable block (what also makes me impossible to have it collapsed by default).

So - what changes I need, to have my collapse image in place where it is set? - not moved to other one like it is now.
__________________
vBulletin Enterprise Translator (vBET) - your forum in 53 languages - get more traffic, users and incomes from AdSense!

Last edited by NLP-er; 04 Feb 2010 at 14:20.
Reply With Quote
  #15  
Old 04 Feb 2010, 17:18
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Real name: Sven
You need to find out what css definitions make it go to the right. Use a tool like firebug for that. IIRC it is the collapsible-class that forces it to the right. Since you need that class for the collapse javascript to work, you'll need to override it.
__________________
Please note that there will be no further updates to my addons, especially they will not be upgraded for vB5. I'm leaving vB, since IB choose to go the banana-way yet again.

http://www.roma-antiqua.de
Reply With Quote
Reply



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 00:43.

Layout Options | Width: Wide Color: