Miscellaneous Hacks - Making something collapsible inside templates, using collapsible block

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:

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

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:

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

For example, you can use for code there: {vb:raw infractionbits} or {vb:raw reputationcommentbits} or something similar.

One example you can find here: https://vborg.vbsupport.ru/showthread.php?t=278884 Here I made collapsible block of usernotes in user profile.