[HOW TO - vB4] Making Boxes Collapsible
 

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.




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

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).




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:




Result:

In the end, the code will look like that:




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:

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).

thanks

Thanks,

if the user has JavaScript disabled, we can add :

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.

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.

Whenever I change the class for a custom one I made the expand/collapse function no longer works. See my thread here:

https://vborg.vbsupport.ru/showthread.php?t=231538

You can assign more than one class to an element, like so: class="collapse yourclass".

Here is what Im working with:

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.

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.

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.

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.

So tell me what is wrong with my code ?

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.

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.

I was trying to override it by adding also style attribute, but I fail there. Maybe I was using wrong CSS - as I remember I was playing with position. It didn't work so I thought that maybe there is also some JS which is changing it dynamically... - do you know something about that? Maybe you know which CSS style to use to force it staying in its place?

Did you try looking at it using firebug? I can manipulate positioning by modifying a.collapse img, and the javascript does not mess with positioning as far as I can tell.

I'm trying to collapse my header for smaller monitors and have a cookie set so it remembers the open or closed state like VB does in its collapse buttons. It doesn't seem to work. Can anyone help me get this so it remembers the cookie?

CSS CODE

I would think that your code collides with vB's. If you're setting your own cookie anyway, just don't use vB's collapsing method at all. That'll be probably much easier than getting this to work together.

I sure could use your help!

No I didn't and I think I will have to. Since you was already playing with it - do you have any hints about which css style to use?

What do you mean by css style? I already told you which selector/element to look for: a.collapse img

I mean that I want to add style parameter to img element to override this one which is inside of a.collapse img and I was asking do you already know which css style exactly have to be overridden to keep it on it's place (like position, float) :) If you do not know - it's OK I will play with it. I just hoped that someone already know the answer and safe me some time ;)

As I said: I looked at it with firebug and the settings are just there to read. If you really want to work with vB4 styling, you really should make use of this. As a cleaner solution instead of inline styling I would recommend to give the img your own custom class and define that class in additional.css :)

Thanks for help and sorry for all those questions - I was just lazy ;) Your first information about css (a.collapse img) was enough - I just search whole vBulletin code for that and I found what I needed :)

Thanks once again :):up:

--------------- Added [DATE]1266506576[/DATE] at [TIME]1266506576[/TIME] ---------------

Strange - I'm in firebug right now. Have chosen appropriate img. But it doesn't show me that there is used a.collapse img. And when I'm going to CSS view then there is no such style at all... :confused:

--------------- Added [DATE]1266507137[/DATE] at [TIME]1266507137[/TIME] ---------------

Ok - I found solution anyway - I just went 1 level higher and play with style for a - seems working, but not tested in other browsers yet.

--------------- Added [DATE]1266507539[/DATE] at [TIME]1266507539[/TIME] ---------------

Working and tested. It is needed to ad in a with class collapse a
style attribute with value position: static; float: none;

So it goes:

Thanks, works like a charm, made a few changes to run it from a plugin, but still workds, lovely.

Does this work in vBulletin admincp?

Never tried, but I doubt it. This was reworked for vB4, and there have been no significant changes to the AdminCP, so maybe not. On a second thought, I am unable to remember having seen anything collapsible in the AdminCP before...

Thanks!!

Yes, big truth: the collapsible element has to have a unique id.

I was trying to make all my static-html cms widgets collapsible. The problem was that that template is for all static-html cms widgets, so when assign a unique id in the results were a bit crazy, as cellarius said. Obviusly, if I put a text string for the id like above ("collapse_uniqueid"), that id string will be the same for all html-static widgets the page contains; so click on a widget collapses another, collapse buttons dissapear...:(

The solution was to make use of the widget's title as the unique id:
So I change the vbcms_widget_static_page template a bit:

Now every html-static widget has a unique id as each of them has an only one name, and probably all my widgets will be collapsible.

And all that thanks to cellarius :up:

Why setting your own cookie? If you use a unique ID this will allready be done by default. At least it does with my vB4.0.2

And a big thanks for this tutorial!!
Bruno

--------------- Added 18 Mar 2010 at 21:50 ---------------

Perhaps this little example is a good starting point, also to see how IDs and remembering the state in the cookie works: Open postbit_legacy and add the red code:

Now you will have a collapse/expand Button on the top right of every posting which will collapse the user informations. Now:

1. Collapse the users on posting #1 and #3
2. load another thread
3. you will see that #1 and #3 are still collapsed, since their ID is the same in every Thread: post_1, post_3

[Of course it would be more intelligent to collapse something else, but this way all necessary code is in the range of 3 lines :)]

--------------- Added 19 Mar 2010 at 00:13 ---------------

If you want to work via Plugin, you have to

• replace {vb:raw relpath} with $relpath etc.
• work via variables.
• hardencode the red part, until someone tells us, how to do it the right way (:)) ($stylevar['imgdir_button'] and $vbcollapse['collapseimg_cel_dummy_img'] seem not to be accessible or are not set in certain hooks.)
  

An example to make replies collapsable: Create a plugin on hook showthread_postbit_create with code
and a plugin on hook showthread_complete with code
--------------- Added 19 Mar 2010 at 00:27 ---------------

One thing I don't know but isn't important yet: When using a text instead of the icon only. How can I change the text so it says whether the box is collapsed or not?
-> Hide Discussion -> Show Discussion

--------------- Added 19 Mar 2010 at 00:58 ---------------

Question:
One I could use right now: Is there a way to collapse all User Infos at once, so there isn't even a white space?

If you refer to make the entire what's going on box collapsible, try this:

Forumhome template, find:
Replace with:
Then find:
And replace (to close the added div above):

Modified also this, works fine :). Thanks!

But what I want, is to collapse multiple containers at once, e.g. the userinfo (see attachment 1 -> 2 How could this be done?

(I want to get attachment 3 at a final stage, but first 2 to understand the basics. 3 needs more changes)

Thanks!
Bruno

Oh... I see what you want, but I guess that you really want is more fun!!! :)

I said that because I think that sometimes, in terms of efficiency simple ways are better. So maybe at this point I would start considering to use the postbit look instead of the legacy_postbit, or a hack that gives your users a chance to switch between them. After all, the main purpose of postbit is precisely to give more horizontal space to that area, and there it is.

Thanks for your thoughts, but the reason is, to really hide user informations.

I'm trying different things to make a wiki obsolete. Or better said: To have wiki articles inside the forum, in the same data tables.

It was easy to create a wiki user (everyone can edit it and see his history, including who changed what) and make discussions disappear (Thanks to this thread: Collapse the postings after the first).

Next step: Forget about the user, as common in wikis.

Implementation: Isn't it possible with vBs own scripts: Read value from Cookie and set/unset .postbitlegacy .userinfo {display="none";}?

Brilliant, does exactly as described, perfect, thank you.

Been playing around with this and am stuck. What i want to do is have the userinfo in postbit_legacy collapsible by userid rather than which post in a thread (like described in this post). So I could hide a certain user's info and it would stick throughout the forum regardless of where they post.
That make sense?

I realized something similar for "collapse all user info and other details", could surely be changed to "collapse info of users by id".

Look at ProjectBay.net > Thread and press the http://projectbay.net/images/details.png-Button on the right (FireFox: Alt-Shif-i). Interesting for you?

Bruno

Not quite.Thank you though.

So what you want is something similar to the "Invisible User", which seems, as it has been sent to "ignore user" from every one?