Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
[HOW TO - vB4] Making Boxes Collapsible
cellarius's Avatar
cellarius
Join Date: Aug 2005
Posts: 1,987

 

Show Printable Version Email this Page Subscription
cellarius cellarius is offline 08-22-2009, 10:00 PM

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.

Code:
<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


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

Code:
<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:

Code:
<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:

Code:
<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:

Code:
<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).
Reply With Quote
  #22  
Old 02-10-2010, 04:39 PM
NLP-er's Avatar
NLP-er NLP-er is offline
 
Join Date: Aug 2008
Location: Wrocław
Posts: 1,353
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by cellarius View Post
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?
Reply With Quote
  #23  
Old 02-10-2010, 08:51 PM
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Posts: 1,987
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

What do you mean by css style? I already told you which selector/element to look for: a.collapse img
Reply With Quote
  #24  
Old 02-11-2010, 06:29 PM
NLP-er's Avatar
NLP-er NLP-er is offline
 
Join Date: Aug 2008
Location: Wrocław
Posts: 1,353
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by cellarius View Post
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
Reply With Quote
  #25  
Old 02-12-2010, 06:45 AM
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Posts: 1,987
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply With Quote
  #26  
Old 02-17-2010, 06:24 PM
NLP-er's Avatar
NLP-er NLP-er is offline
 
Join Date: Aug 2008
Location: Wrocław
Posts: 1,353
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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

Quote:
Originally Posted by cellarius View Post
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...

--------------- 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:
Code:
<a href="#top" class="collapse" style="position: static; float: none;" id=...
Reply With Quote
  #27  
Old 02-19-2010, 10:27 AM
Vaupell's Avatar
Vaupell Vaupell is offline
 
Join Date: Apr 2008
Location: Esbjerg, Denmark
Posts: 1,036
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks, works like a charm, made a few changes to run it from a plugin, but still workds, lovely.
Reply With Quote
  #28  
Old 03-03-2010, 12:37 PM
akanevsky akanevsky is offline
 
Join Date: Apr 2005
Posts: 3,972
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Does this work in vBulletin admincp?
Reply With Quote
  #29  
Old 03-03-2010, 12:50 PM
cellarius's Avatar
cellarius cellarius is offline
 
Join Date: Aug 2005
Posts: 1,987
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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...
Reply With Quote
  #30  
Old 03-04-2010, 02:36 PM
andreamarucci's Avatar
andreamarucci andreamarucci is offline
 
Join Date: Nov 2005
Posts: 254
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks!!
Reply With Quote
  #31  
Old 03-07-2010, 10:18 AM
Dubi's Avatar
Dubi Dubi is offline
 
Join Date: Dec 2007
Posts: 17
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by cellarius View Post
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
HTML Code:
<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:
HTML Code:
<a class="collapse" id="collapse_{vb:raw widget_title}"....
So I change the vbcms_widget_static_page template a bit:

HTML Code:
<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:
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:15 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05491 seconds
  • Memory Usage 2,348KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (7)bbcode_code
  • (3)bbcode_html
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (9)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete