vb.org Archive - How To Create Collapsable Boxes

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- Programming Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=188)

- - How To Create Collapsable Boxes (https://vborg.vbsupport.ru/showthread.php?t=119931)

Quote:

Originally Posted by Kerry-Anne (Post 1018682)

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.

i know this is a little old but i figured i'd try anyway.

i have 3 divs that I want opened and closed w/ one click. even though all 3 have the same name, only the first div is opening.

here's my calendar event RSVP template

Code:

<if condition="!$eventempty">

        <hr>

</if>



<if condition="$rsvp_yes || $rsvp_maybe || $rsvp_no"><a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('group_rsvp')"><img id="collapseimg_group_rsvp" alt="Show/Hide Users" src="$stylevar[imgdir_button]/collapse_alt_collapsed.gif" alt="" border="0" /></a></if>

<if condition="$rsvp_yes">

        <b>$vbphrase[calendar_rsvpd] $vbphrase[yes]: $rsvp_yes_count </b>

        <if condition="$eventinfo[rsvp_max_guests]">

                (<phrase 1="$rsvp_yes_members" 2="$rsvp_yes_guests">$vbphrase[x_members_and_y_guests]</phrase>)

        </if>

        <div id="collapseobj_group_rsvp" style="display: none;"><ul><if condition="$vboptions[rah_rsvp_showavatar]"><table>$rsvp_yes</table><else />$rsvp_yes</if></ul></div>

</if>

<if condition="$rsvp_maybe">

        <b>$vbphrase[calendar_rsvpd] $vbphrase[maybe]: $rsvp_maybe_count</b> 

        <if condition="$eventinfo[rsvp_max_guests]">

                (<phrase 1="$rsvp_maybe_members" 2="$rsvp_maybe_guests">$vbphrase[x_members_and_y_guests]</phrase>) 

        </if>

        <div id="collapseobj_group_rsvp" style="display: none;"><ul><if condition="$vboptions[rah_rsvp_showavatar]"><table>$rsvp_maybe</table><else />$rsvp_maybe</if></ul></div>

</if>

<if condition="$rsvp_no">

        <b>$vbphrase[calendar_rsvpd] $vbphrase[no]: $rsvp_no_count</b>

        <div id="collapseobj_group_rsvp" style="display: none;"><ul><if condition="$vboptions[rah_rsvp_showavatar]"><table>$rsvp_no</table><else />$rsvp_no</if></ul></div>

</if>

it's not an option to use 1 div. I want to list the RSVP counts but hide the users & comments.

if anyone knows what i'm doing wrong, I'd love the help. thanks

I really need help on this. anyone?

I have the divs setup individually with no problem. my issue is trying to have multiple divs oven with one click. i gave all the divs the same id but only the first one opens & closes

the code is quoted above

I've created a left-column menu thingy (I know.... such technical terms... lol) with collapsable boxes, but they don't quite act like the collapsable boxes on the rest of the site. I mean, I got them to work, and I even used the display: none thing to make them collapsed upon page loads, but the rest of the boxes (What's going on box and forum category boxes) will remember when they have been collapsed. Sometimes I will collapse boxes and as I return to the forum home page, they will remain collapsed, but the side menu boxes don't remember. They will either be open or closed depending on whether I have added the display:none thing in the style variable, but not dependant on whether I have opened or closed them before. Is there a reason for this?

Quote:

Originally Posted by Buraq (Post 1052411)

dang....that sucks :(

Is there ANY way around this? Is it possible to have any other variable in there? like...

Code:

src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_postbit_userinfo$x].gif"

where I define $x outside?

Buraq, there is a way around this, if you're still looking for a solution. Or if anyone happens to be looking for the same solution. Only drawback is you have to be willing to edit some php code as well. Take a look at the template forumhome_forumbit_level1_nopost

Code:

<tbody>

    <tr>

        <td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">

            <if condition="$childforumbits">

            <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>

            </if>

            <a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>

            <if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>

            <if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>

        </td>

    </tr>

</tbody>

<if condition="$childforumbits">

<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">

$childforumbits

</tbody>

</if>

I've highlighted the variables they use. In the php file, in this case, includes\functions_forumlist.php they generate that variables with the code starting on line 377

Code:

            if ($depth == 1 AND $tempext == '_nopost')

            {

                global $vbcollapse;

                $collapseobj_forumid =& $vbcollapse["collapseobj_forumbit_$forumid"];

                $collapseimg_forumid =& $vbcollapse["collapseimg_forumbit_$forumid"];

                $show['collapsebutton'] = true;

            }

Now I have a custom php file for my site and was able to mimick this into that file as well as it's bit template. Hope someone else finds this useful.

bump for ravyn's (#23) question

Quote:

Originally Posted by ravyn (Post 1318442)

Sometimes I will collapse boxes and as I return to the forum home page, they will remain collapsed, but the side menu boxes don't remember. They will either be open or closed depending on whether I have added the display:none thing in the style variable, but not dependant on whether I have opened or closed them before. Is there a reason for this?

There's 2 tricks to remember the state of a collapsed element.
1 - Using unique variables and the tricks involved in naming them.
2 - Some places require you to reference the GLOBAL to get the collapsed state from the cookie.

To do something like collapse a post.
Button:

Code:

<a href="#top" style="float:$stylevar[right]"

   onclick="return toggle_collapse('post_$post[postid]')">

   <img id="collapseimg_post_$post[postid]"

   src="$stylevar[imgdir_button]/collapse_thead{$GLOBALS['vbcollapse']['collapseimg_post_'.$post[postid]]}.gif" 

   alt="Collapse/Expand" border="0" /></a>

Table:

Code:

<table width="100%" align="right" border="0" cellpadding="0" cellspacing="0">

<tbody id="collapseobj_post_$post[postid]"

   style="{$GLOBALS['vbcollapse']['collapseobj_post_'.$post['postid']]}">

Stuff to hide.

</tbody>

</table>

Without using $GLOBALS['vbcollapse'], it won't get the information from the cookie.

AlphaNation, thanks!

lol thank you so much, i spent about 2 hours trying to figure out how to get collapsible boxes working right, and about 10 minutes after i am done i come here and see your tutorial anyways thanks, This will save people a lot of time.

Thanks, I spent some time too, trying to get the boxes working.

the default code is changed in 4.1.11
what to do?

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (6)bbcode_code_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01700 seconds Memory Usage 1,759KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (6)bbcode_code_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: