[HOW TO - vB4] Making Boxes Collapsible

[BRotondi]

Originally Posted by voglermc

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:

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

$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]

Originally Posted by BRotondi

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]

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]

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]

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]

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

[mandingo]

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?

[BRotondi]

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 -Button on the right (FireFox: Alt-Shif-i). Interesting for you?

Bruno

[mandingo]

Not quite.Thank you though.

[BRotondi]

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