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)

I hate to dig this up, but how do you make the box collapsed by default? I read something in another thread, it does the job, but then it still shows the "collapse" button by default instead of the "expand" button.

As Kerry-Anne posted above:

Code:

<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]; display:none">

It's not a good idea to use this though, as users with Javascript disabled won't be able to expand the container.

Quote:

Originally Posted by acidburn0520

As Kerry-Anne posted above:

Code:

<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]; display:none">

It's not a good idea to use this though, as users with Javascript disabled won't be able to expand the container.

That's exactly what I did, but like I said above, it shows the wrong button for collapsing. Is there any other way to do this?

Now I know nothing about javascript, but since this seems to be a JS function, is it possible to do something like toggle_collapse in <body onload>? So it collapses the box when the page loads, and then you'd have to click the button to collapse?

I'm hoping that you did read the enitre tutorial, and not literally use that code that Kirk quoted, as that won't work correctly as it is the control for another box.

Can you provide a copy of the code you are using for the box, along with details of where it is and a link to view it on your site, and I'll give it a look over for you.

Quote:

Originally Posted by peterska2

I read the tutorial when I originally made collapsable boxes on my site (and they work fine), but when I came back for making them collapsed by default I just added the "display:none" (I payed attention to your tutorial :)).

Currently you have to be an administrator to view the style I'm working on, and we're also in the process of upgrading to 3.6.0, so I'll get back to you guys later with screenshots. For now here's the code for the box...

Code:

<table class="tuser_info" cellpadding="0" cellspacing="0" border="0" width="100%" align="center">

         <tbody>

              <tr>

              <td class="vbmenu_control" colspan="2">

                   <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('postbit_userinfo$post[postcount]')"><img id="collapseimg_postbit_userinfo$post[postcount]" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_postbit_userinfo].gif" alt="" border="0" /></a>

                   User Info

              </td>

              </tr>

         </tbody>

         <tbody id="collapseobj_postbit_userinfo$post[postcount]" style="$vbcollapse[collapseobj_postbit_userinfo]; display:none">

              <tr>

              <td>

                       <div class="smallfont">

                                <if condition="$post['joindate']"><div id="profileField">$vbphrase[join_date]: $post[joindate]</div></if>

                                <if condition="$post['field2']"><div id="profileField">$vbphrase[location_perm]: $post[field2]</div></if>

                                <if condition="$post['age']"><div id="profileField">$vbphrase[age]: $post[age]</div></if>

                                <div id="profileField">

                                        $vbphrase[posts]: $post[posts]

                                </div>

                                <if condition="$show['reputation']"><div><if condition="$show['reppower']">$vbphrase[reppower]: $post[reppower]</if>$post[reputationdisplay]</div></if>

                                <if condition="$post['icqicon'] OR $post['aimicon'] OR $post['msnicon'] OR $post['yahooicon'] OR $post['skypeicon']"><div id="profileField">IM: $post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div></if>

                        </div>                                        

                              </td>

              </tr>

         </tbody>

</table>

Note that I have built the collapsable box around the user info in my postbit_legacy template, which I've also modified in other ways.

ok, there is a simple reason for this. For your id you have

Code:

id="collapseobj_postbit_userinfo$post[postcount]"

and your image is

Code:

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

Those are different, but you cannot put

Code:

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

as this is invalid code.

There isn't anything that you can do about this I'm afraid, unless you want them all to open and close regardless of which post you click on.

Quote:

Originally Posted by peterska2

ok, there is a simple reason for this. For your id you have

Code:

id="collapseobj_postbit_userinfo$post[postcount]"

and your image is

Code:

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

Those are different, but you cannot put

Code:

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

as this is invalid code.

There isn't anything that you can do about this I'm afraid, unless you want them all to open and close regardless of which post you click on.

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?

I wouldn't think so. You are probably best using a popup menu to achieve the results that you want for this.

wow, thx for this tut mate :)

the only thing you can do is collapse on load. That is what i did at least.
<script type="text/javascript">toggle_collapse('yourcollapseidhere')</script>

Quote:

Originally Posted by acidburn0520

Is it possible to display text in place of the image for the collapse button?

<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><div id="collapseimg_forumhome_activeusers" alt="" border="0" />Text goes here</div></a>

this should work, i tried it before using text and im pretty sure i did this.

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 (10)bbcode_code_printable (4)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.02708 seconds Memory Usage 1,753KB 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 (10)bbcode_code_printable (4)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: