The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
[HOW TO - vB4] Making Boxes Collapsible
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"> 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;">
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). |
#52
|
|||
|
|||
Oups... Thanks for the hint! (repaired)
Another Question: Is there a simple way to make a div collapsed by default? |
#53
|
||||
|
||||
You may want to read the article
|
#54
|
|||
|
|||
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...)
|
#55
|
||||
|
||||
at least if I knew of it
|
#56
|
|||
|
|||
O.K. here an example with an own script: When registering, "Additional Infos" will be collapsed:
Replace in Template register Code:
<h3 class="blocksubhead">{vb:rawphrase additional_information}</h3> Code:
<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"> Code:
{vb:raw customfields_other} </div> Code:
{vb:raw customfields_other} </div> </div> Regards, Bruno |
#57
|
|||
|
|||
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=.. |
#58
|
||||
|
||||
Wrap a div around your table.
|
#59
|
|||
|
|||
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 |
#60
|
||||
|
||||
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}).
|
#61
|
|||
|
|||
how do i add id for blocks in vbCMS 4.1.4?, they dont have any id..
|
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|