Making something collapsible inside templates, using collapsible block
Mod Version: 1.00, by Alan_SP
| vB Version: 4.x.x | Rating:  (0 vote - 0 average) |
Installs: 4 |
| Released: 29 Nov 2015 | Last Update: Never | Downloads: 0 |
 Not Supported
 Template Edits
Re-usable Code
Translations
|
||
Well, sometimes we want to make something collapsible, so users can see it, or not, depending on their wishes.
To make some HTML code collapsible in vB4, you need to use this code:
In upper example I used CODE BBtag so I can use color BBcode, so you can see in red what are variables you can (and have to) change to suit your needs. The two unique names in green must be the same that collapsing work.
This is most universal example, you can also have ordered list, than you have something like this:
For example, you can use for code there: {vb:raw infractionbits} or {vb:raw reputationcommentbits} or something similar.
One example you can find here: User notes visibile immediately on user's profile Here I made collapsible block of usernotes in user profile.
To make some HTML code collapsible in vB4, you need to use this code:
Code:
<div class="block collapse" id="unique id name">
<h2 class="blockhead">Name of the block, can be phrase, can be hardcoded
<a class="collapse" id="collapse_unique name" 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="blockbody settings_form_border" id="unique name">
-------------here goes code that you want inside collapsible block, whatever it is --------------
</div>
</div>
This is most universal example, you can also have ordered list, than you have something like this:
Code:
<div class="block collapse" id="unique id name">
<h2 class="blockhead">Name of the block, can be phrase, can be hardcoded
<a class="collapse" id="collapse_unique name" 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>
<ol class="blockbody settings_form_border" id="unique name">
-------------here goes code that you want inside collapsible block, whatever it is --------------
</ol>
</div>
One example you can find here: User notes visibile immediately on user's profile Here I made collapsible block of usernotes in user profile.
Download
No files for download.