MyBB Community Forums

Hi there,

since I use some of the MyCodes here, I'd like to contribute one, too.

So, here is my little Expand-Collapse Box with a clickable title.
It works without the .css, but it will look odd.


Regular Expression:

\[expand=(.*?)\](.*?)\[/expand\]

Replacement:

<div class="expandBox"><div style="cursor:pointer;" class="expandTitle" onclick="jQuery(this).next().slideToggle(); jQuery(this).children('.expandOpen').toggle(); jQuery(this).children('.expandClose').toggle();"><span class="expandOpen">Show:</span><span class="expandClose" style="display:none;">Hide:</span>&nbsp;$1</div><div style="display: none;">$2</div></div>

Put this into a custom .css stylesheet or into global.css:

.expandBox {
    border-radius: 5px;
    padding: 5px;
    border-left: 1px solid lightgray;
}

.expandOpen, .expandClose {
	font-size: 0.8em;
}

.expandTitle {
	text-decoration: underline;
}

How to use it:

[expand=Long list of stuff]
   Lorem
   ipsum
   dolor
   ...
[/expand]

What it looks like hidden:
[attachment=35291]

And visible:
[attachment=35292]

Nice work Frobnic!