PDA

View Full Version : [HOW TO - vB4] Making Boxes Collapsible


cellarius
23 Aug 2009, 16:45
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.


<div id="test" class="anything">
<h2 class="blockhead">
<span>Collapse it!</span>
</h2>
<div class="blockrow">
<p>Let's add a button to collapse this box :-)</p>
</div>
</div>



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

<div id="test" class="anything collapse">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).

<div class="blockrow" id="cel_dummy">


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:

<a class="collapse" id="collapse_cel_dummy" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_cel_dummy_img}_40b.png" alt="{vb:rawphrase collapse_this_category}" /></a>


Result:

In the end, the code will look like that:

<div id="test" class="block collapse">
<h2 class="blockhead">
<span>Collapse it!</span>
<a class="collapse" id="collapse_cel_dummy" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_cel_dummy_img}_40b.png" alt="{vb:rawphrase collapse_this_category}" /></a>
</h2>
<div class="blockrow" id="cel_dummy">
<p>Let's add a button to collapse this box :-)</p>
</div>
</div>


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:

<div class="blockrow" id="cel_dummy" style="display: none;">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).

SİMAR
20 Nov 2009, 14:43
thanks

xman_79
05 Dec 2009, 11:19
Thanks,

if the user has JavaScript disabled, we can add :



<a class="collapse" id="collapse_cel_dummy" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_cel_dummy_img}_40b.png" alt="{vb:rawphrase collapse_this_category}" /></a>
<noscript>You need to have JavaScript enabled so that you can use this ...</noscript>

LifesGreatestGift
29 Dec 2009, 06:07
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.

cellarius
29 Dec 2009, 07:57
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.

LifesGreatestGift
29 Dec 2009, 08:04
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

cellarius
29 Dec 2009, 08:05
You can assign more than one class to an element, like so: class="collapse yourclass".

LifesGreatestGift
29 Dec 2009, 08:08
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.

cellarius
29 Dec 2009, 08:28
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.

SledgeHead
01 Jan 2010, 20:30
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?

cellarius
02 Jan 2010, 09:17
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.

winstone
04 Jan 2010, 05:11
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.

TimberFloorAu
26 Jan 2010, 22:57
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-->

NLP-er
04 Feb 2010, 13:14
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.

cellarius
04 Feb 2010, 17:18
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.

NLP-er
05 Feb 2010, 13:24
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?

cellarius
05 Feb 2010, 13:39
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.

voglermc
05 Feb 2010, 16:55
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?

<div id="vb4_container">

<div id="vb4" style="width:920px"><a id="vb4_link" href="http://www.domain.org/"></a>

<div id="vb4_content">
<p>Our club was started as a way for ...</p>
<ul>
<li><a href="http://www.domain.org/register.php">Click Here to learn MORE!</a></li>
</ul>
</div>

</div>

<a id="vb4_close" href="#" onclick="
var v_vob = fetch_object('vb4_container');
if(v_vob)
{
set_cookie('vb4banner_off', v_vob.className ? '' : 1);
v_vob.className = v_vob.className ? '' : 'promo_closed';
}
return false;
"></a>

</div>


CSS CODE


/* vB4 Promo */
#vb4_container {
background-color:#2d2d2d;
/*margin: 0 -35px 10px;*/
margin: 0;
padding:10px 0 0 0;
position:relative;
}

#vb4 {
margin: auto;
background: transparent url(http://www.domain.org/images/minimized/vb4_promo_bg.jpg) no-repeat 0 0;
height:176px;
position:relative;
}

.promo_closed #vb4 {
margin: auto;
background: transparent url(http://www.domain.org/images/minimized/vb4_promo_bg.jpg) no-repeat 0 -78px;
height:176px;
position:relative;
}

#vb4_link {
position:absolute;
top:0;
left:0;
width:580px;
height:132px;
outline: none;
}

#vb4_content {
position:absolute;
right:0;
top:0;
width:324px;
background: transparent url(http://www.domain.org/images/minimized/vb4_promo_title.png) no-repeat -2px 5px;
min-height: 64px;
}

#vb4_content p {
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
margin-top:46px;
margin-bottom:26px;
color:#FFF;
font-size:11px;
}

#vb4_content ul {
margin:0px;
padding:0;
position:absolute;
bottom:0;
}

#vb4_content li {
list-style-type:none;
display:inline;
margin-right:10px;
}

#vb4_content li a {
color:#dd0000;
font-family:helvetica,sans-serif;
font-weight:bold;
font-size:14px;
text-decoration:none;
outline: none;
}

#vb4_close {
position:absolute;
bottom:0;
right:0;
background: transparent url(http://www.domain.org/images/minimized/vb4_promo_minimize.png) no-repeat 0 0;
width: 28px;
height: 27px;
outline: none;

}

.promo_closed #vb4_content p {
display:none;
}

.promo_closed #vb4 {
height:116px;
}

.promo_closed #vb4_content {
top:52px;
bottom:16px;
}

#vb4_container.promo_closed {
margin-top: -64px;
}

.promo_closed #vb4_close {
background: transparent url(http://www.domain.org/images/minimized/vb4_promo_maximize.png);
outline: none;
}

/* End vB4 Promo */

cellarius
05 Feb 2010, 17:00
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.

voglermc
05 Feb 2010, 17:20
I sure could use your help!

NLP-er
10 Feb 2010, 18:39
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.

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?

cellarius
10 Feb 2010, 22:51
What do you mean by css style? I already told you which selector/element to look for: a.collapse img

NLP-er
11 Feb 2010, 20:29
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 ;)

cellarius
12 Feb 2010, 08:45
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 :)

NLP-er
17 Feb 2010, 20:24
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 1266506576 at 1266506576 ---------------

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.

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 1266507137 at 1266507137 ---------------

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 1266507539 at 1266507539 ---------------

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:

<a href="#top" class="collapse" style="position: static; float: none;" id=...

Vaupell
19 Feb 2010, 12:27
Thanks, works like a charm, made a few changes to run it from a plugin, but still workds, lovely.

akanevsky
03 Mar 2010, 14:37
Does this work in vBulletin admincp?

cellarius
03 Mar 2010, 14:50
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...

andreamarucci
04 Mar 2010, 16:36
Thanks!!

Dubi
07 Mar 2010, 12:18
The element has to have an id that needs to be unique not only on the page, but on the whole site.
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 <a class="collapse" id="collapse_uniqueid".... 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:
<a class="collapse" id="collapse_{vb:raw widget_title}"....So I change the vbcms_widget_static_page template a bit:

<div class="cms_widget collapse">
<div class="block">
<div class="cms_widget_header">
<a class="collapse" id="collapse_{vb:raw widget_title}" style="position: static" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse_40b.png" alt="" border="0" /></a>
<h3>{vb:raw widget_title}</h3>
</div>
<div class="cms_widget_content" id="{vb:raw widget_title}">
{vb:raw static_html}
</div>
</div>
</div>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:

BRotondi
18 Mar 2010, 21:29
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.
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:

<div class="postdetails collapse">
<a class="collapse" id="collapse_post_{vb:raw post.postcount}" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_cel_dummy_img}_40b.png" alt="{vb:rawphrase collapse_this_category}" /></a>
<div class="userinfo" id="post_{vb:raw post.postcount}">
Now you will have a collapse/expand Button on the top right of every posting which will collapse the user informations. Now:
Collapse the users on posting #1 and #3
load another thread
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.)
$exampleVar = '<div class="postdetails collapse"><a class="collapse" id="collapse_collapsereplies" href="' . $relpath . '#top"><img src="' . 'images/buttons' . '/collapse' . '' . '_40b.png" alt="' . $vbphrase['collapse_this_category'] . '" /></a><div class="userinfo" id="collapsereplies">';An example to make replies collapsable: Create a plugin on hook showthread_postbit_create with code
//B Replies collapsable
//first post?
if ($post['postcount'] == 1) {
$BThreadPage1 = true;
$BReplyFound = false;
$BThreadOwner = $post['userid'];

//page 1 of Thread?
} elseif ($BThreadPage1) {

//first reply allready found?
if ($BReplyFound) {
}

//is this the first reply?
elseif ($post['userid'] != $BThreadOwner) {
$BReplyFound = true;

//Debug echo "OPEN:" . $post['postcount'] . "|";
$postbits .='</ol>' .
'<div class="postdetails collapse">' .
' <a style="float:left; position:static;" class="collapse" id="collapse_collapsereplies" href="' . $relpath . '#top">Diskussion ein/ausblenden<img src="images/buttons/collapse_40b.png" alt="Diskussion ein/ausblenden" /></a>' .
' <div class="userinfo" id="collapsereplies">' .
' <ol id="posts" class="posts" start="' . $post['postcount'] . '">';
}
}and a plugin on hook showthread_complete with code
if ($BReplyFound) {
$postbits .='</ol></div></div><ol>';
}--------------- 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?
<a class="collapse" id="collapse_collapsereplies" href="' . $relpath . '#top">Hide/Show Discussion<img src="images/buttons/collapse_40b.png" alt="Discussion on/off" /></a><div class="userinfo" id="collapsereplies">';
-> 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?

Dubi
19 Mar 2010, 13:13
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:
<!-- what's going on box -->
<div id="wgo" class="collapse wgo_block">
<h2>
<span>{vb:rawphrase whats_going_on}</span>
</h2>
<div class="floatcontainer">Replace with:
<!-- what's going on box -->
<div id="wgo" class="collapse wgo_block">
<h2>
<a class="collapse" id="collapse_wgobox" style="position:static;margin-right:5px;margin-top:5px;" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse_40b.png" alt="" border="0" /></a>
<span>{vb:rawphrase whats_going_on}</span>
</h2>
<div class="collapse" id="wgobox">
<div class="floatcontainer" id="collapse_wgobox">Then find:
{vb:raw template_hook.forumhome_wgo_pos5}
</div>
</div>
<!-- end what's going on box -->And replace (to close the added div above):
{vb:raw template_hook.forumhome_wgo_pos5}
</div>
</div>
</div>
<!-- end what's going on box -->

BRotondi
19 Mar 2010, 15:13
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

Dubi
29 Mar 2010, 17:00
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.

BRotondi
29 Mar 2010, 19:59
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";}?

AliceHoward
11 Apr 2010, 17:54
Brilliant, does exactly as described, perfect, thank you.

mandingo
20 Jun 2010, 22:15
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 (http://www.vbulletin.org/forum/showpost.php?p=2006019&postcount=31)). So I could hide a certain user's info and it would stick throughout the forum regardless of where they post.
That make sense?

BRotondi
21 Jun 2010, 07:51
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 (http://projectbay.net/forum/showthread.php?585%20-%20What%20it%20does) and press the http://projectbay.net/images/details.png-Button on the right (FireFox: Alt-Shif-i). Interesting for you?

Bruno

mandingo
21 Jun 2010, 08:07
Not quite.Thank you though.

BRotondi
21 Jun 2010, 09:12
So what you want is something similar to the "Invisible User", which seems, as it has been sent to "ignore user" from every one?

mandingo
21 Jun 2010, 17:55
I want to be able to see the username and avatar but have an expand/collapse switch for the rest of the details (postcount,location,thanks etc) per user.

BRotondi
21 Jun 2010, 19:52
I see. So first try my Example on #31 (http://www.vbulletin.org/forum/showpost.php?p=2006019&postcount=31). If this works, you will have learned all you need to do what you want.

mandingo
22 Jun 2010, 01:04
I did try that but it only works for the particular post in a thread,not by the user, which is what I'm looking for.

BRotondi
22 Jun 2010, 07:24
Of course :). But now you should need only little skill to change the necessary:
{vb:raw post.postcount} -> {vb:raw user.userid} (or similar) and search for / add the div you want to collapse.

mandingo
22 Jun 2010, 20:08
Of course :). But now you should need only little skill to change the necessary:
{vb:raw post.postcount} -> {vb:raw user.userid} (or similar) and search for / add the div you want to collapse.

!! thanks for steering me in the direction I needed! I bet it'l work.
stay tuned.

--------------- Added 1277275585 at 1277275585 ---------------

ugh, can't seem to get it. :(

BRotondi
23 Jun 2010, 13:14
Can you Post your TMS-xml? I will see how I can help you.

mandingo
25 Jun 2010, 19:01
what is TMS-xms?

zackcez
25 Jun 2010, 19:36
So I take it as this won't work on vb 3.8?

BRotondi
25 Jun 2010, 21:01
what is TMS-xms?If you don't know TMS (http://www.vbulletin.org/forum/showthread.php?t=152931&page=999) (german version (http://www.vbulletin-germany.org/showthread.php?t=24&page=999)), this may take longer... TMS is the most intelligent Extension for vB-Modders ever. You can spezify "Search for xxx" in Template "yyy" and replace/add_before/add_after "zzz".

Then you export all these instructions as xml, so I can continue your work without any delay / manual work.

It will be the best you ever learned, since you
will never have to edit again a Template by hand
will always have an overview of all your modifications
and even you can export your modifications as text-instructions: "Search for xxx in yyy and replace/add_* by zzz
...:) ... sorry for spamming, but really the most fascinating thing I ever learned during my two years of vBulletin.

cellarius
25 Jun 2010, 21:09
To avoid confusion: You export as xml.

--------------- Added 25 Jun 2010 at 22:09 ---------------

So I take it as this won't work on vb 3.8?
No, but IIRC there is an article on pagination for vB3 in the relevant articles section.

BRotondi
25 Jun 2010, 21:18
To avoid confusion: You export as xml. Oups... :) Thanks for the hint! (repaired)

Another Question: Is there a simple way to make a div collapsed by default?

cellarius
25 Jun 2010, 22:06
Another Question: Is there a simple way to make a div collapsed by default?
You may want to read the article ;)

BRotondi
25 Jun 2010, 23:07
Oups... Sorry... I should have asked "Did anyone found a non-dirty quick solution?" (but anyway the answer will be "no", since it would be written in the article...)

cellarius
26 Jun 2010, 10:38
(but anyway the answer will be "no", since it would be written in the article...)
at least if I knew of it ;)

BRotondi
26 Jun 2010, 13:43
O.K. here an example with an own script: When registering, "Additional Infos" will be collapsed:

Replace in Template register <h3 class="blocksubhead">{vb:rawphrase additional_information}</h3> with
<script type="text/javascript">
function RegistryDetailsOn (setcookie) {
$("#registry_details").css({ "display": "" });
$("#registry_details_link").css({ "background": "url('images/buttons/collapse_40b.png') no-repeat scroll 0 0 transparent","padding-left": "17px"});

_set_cookie('RegistryDetails_visible', 1, setcookie);
}
function RegistryDetailsOff (setcookie) {
$("#registry_details").css({ "display": "none" });
$("#registry_details_link").css({ "background": "url('images/buttons/collapse_40b_collapsed.png') no-repeat scroll 0 0 transparent","padding-left": "17px" });

_set_cookie('RegistryDetails_visible', 0, setcookie);
}
function RegistryDetailsInit () {
t = fetch_cookie('RegistryDetails_visible');
if (t=="1") {
RegistryDetailsOn(0);
} else {
RegistryDetailsOff(0);
}
}
function RegistryDetailsSwitch () {
if ($("#registry_details").css("display") == "none") {
RegistryDetailsOn();
} else {
RegistryDetailsOff();
}
}
function _set_cookie(variable, wert, setzen) {
if (!(setzen==0)) {
set_cookie(variable, wert);
}
}
$(document).ready(function(){
RegistryDetailsInit();
});
</script>

<h3 class="blocksubhead"><a href="javascript:RegistryDetailsSwitch()" id="registry_details_link">{vb:rawphrase additional_information}</a></h3>
<div id="registry_details">
and {vb:raw customfields_other}
</div>
with
{vb:raw customfields_other}
</div>
</div>

This Solution uses jQuery and the vB-Cookie-Routines. The Script could be reduced to one switch-line, but this way you have all possibilities for more extended issues.

Regards, Bruno

emath
26 Oct 2010, 15:26
how do i combine it within a table?

like, i dont want to use div, to insert the classes and everything to the <table class=..

cellarius
26 Oct 2010, 20:14
Wrap a div around your table.

dtorreci
23 Nov 2010, 20:18
Hi all,

just a quick question I would like to make my postbit fields collapsable, I have follow the steps provided at page 1 and well it works but only with first post how should I proceed to make it work with all post ?

TIA

cellarius
23 Nov 2010, 20:45
You would have to add something unique to the collapsing id (cel_dummy in the example). You coud try the postid (cel_dummy_{vb:raw post.postid}).

MyLibary
15 Jul 2011, 21:12
how do i add id for blocks in vbCMS 4.1.4?, they dont have any id..

cellarius
16 Jul 2011, 12:40
Then you need to find a way to add one. Likely in the template used by whatever you want to collapse.

Bandit8007
30 Jul 2011, 11:10
hmm im totatlly confused now.....
did try to collapse the wgo in forumhome template
but failed big time...
dunno what i did wrong...

cellarius
30 Jul 2011, 12:02
I don't know either.

radiofranky
02 Aug 2011, 22:20
Hi,
I was wondering if someone could explain how the collapsible box works when clicked to the box background it expands? Something like in slickdeals.net, when someone clicks the background, it expands.

thanks

cellarius
02 Aug 2011, 22:44
vB's collapse method does not allow for this, so this is not for this tutorial, really. You should open your own thread in an appropriate forum. Anyway, you'd have to fire the javascript on the click event of the background, not a link, generally speaking. But a tutorial on how to do that is really too much for this topic.

radiofranky
03 Aug 2011, 18:13
thanks. I was wondering if there is a tutorial that shows how to store variables to DB during the post new thread session. And also how to retrieve those data from DB and render to a template.

cellarius
04 Aug 2011, 10:10
thanks. I was wondering if there is a tutorial that shows how to store variables to DB during the post new thread session. And also how to retrieve those data from DB and render to a template.
Sorry, bit that really has nothing to do with this tutorial at all. This is about collapsing boxes using the vB provided method, nothing else.

Chavi
30 Dec 2011, 16:22
Thanks for the guide. I thought I'll share something:
I had to find a way to collapse more than one element at the same time. Tried using the same ID for every element as you suggest but without luck - only the first one collapses. At the end I've added an empty collapse-triggering <A> tags for every additional element I need collapsed and chained their click events like this:

<a class="collapse" id="collapse_elem1" href="{vb:raw relpath}#top" onClick="document.getElementById('collapse_elem2').click();"><img ...... /></a>
<a class="collapse" id="collapse_elem2" href="{vb:raw relpath}#top" onClick="document.getElementById('collapse_elem3').click();"></a>
<a class="collapse" id="collapse_elem3" href="{vb:raw relpath}#top"></a>

Only the first <A> tag has the changing button image, the others are empty.
This way I was able to collapse the elements with IDs "elem1", "elem2" and "elem3" simultaneously.
Its not very elegant but does the trick ;)

BRotondi
30 Dec 2011, 17:02
Nice workaround :) thanks for sharing!

lilgezuz
11 Jan 2012, 04:50
I tried to use this in a bbcode but its not converting {vb:raw relpath} to the correct path. it just leave it as %7bvb:raw relpath %7d any ideas on how to make it work in a bbcode?

cellarius
11 Jan 2012, 08:28
You need to enter the correct path manually. The variable is a template variable and is not in scope for bbcode.

lilgezuz
11 Jan 2012, 16:48
You need to enter the correct path manually. The variable is a template variable and is not in scope for bbcode.

I see, don't think I can do it then because the path will be changing everytime depending on what page you use it on. Since it would be a bbcode It could be used in post.

Do you think it would work if I was to use your php in BBcode mod

cellarius
12 Jan 2012, 12:49
Yes, I think this should be possible with that mod.

tbworld
04 Mar 2012, 19:58
Thank you so much for taking the time to write this. I was working on figuring this out when I decided to search vbulletin.org to see if I could gain any insight.

Thanks again! I'm a big fan of your apps too!

Daniel
25 Jun 2015, 12:09
Is there a way to remember the choices? Each time I collapse a box and refresh the page, the box reverts to the original style.

Thanks