MyBB Community Forums

This is an animated CSS spoiler (No JS), with an optional spoiler title.

Demo: http://wedesignthe.net/staff_uploads/eri...pid=4#pid4

Regular Expression:

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

Replacement:

<div class="spoiler">
<div><span>$1</span></div>
$2
</div>

Add this to your global.css in all of your themes:

.spoiler {
	background-color: #EEE;
	border: 1px solid #DDD;
	position: relative;
	padding: 10px;
	border-radius: 3px;
}

.spoiler div {
	background-color: #DDD;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 10px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-o-transition: all 0.7s;
	-ms-transition: all 0.7s;
	transition: all 0.7s;
	border-radius: 3px;
}

.spoiler:hover div {
	left: 100%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}

If you use the code below, use it in place of the code above.
Optional (Animated height):

.spoiler {
	background-color:#EEE;
	border:1px solid #DDD;
	position:relative;
	padding:10px;
	border-radius:3px;
	max-height:20px;
	overflow:hidden;
	-webkit-transition:max-height .7s;
	-moz-transition:max-height .7s;
	-o-transition:max-height .7s;
	-ms-transition:max-height .7s;
	transition:max-height .7s;
}

.spoiler:hover {
	overflow-y: auto;
	max-height:500px;
}

.spoiler div {
	background-color:#DDD;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	padding:10px;
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter:alpha(opacity=100);
	opacity:1;
	-webkit-transition:all .7s;
	-moz-transition:all .7s;
	-o-transition:all .7s;
	-ms-transition:all .7s;
	transition:all .7s;
	border-radius:3px;
}

.spoiler:hover div {
	left:100%;
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter:alpha(opacity=0);
	opacity:0;
}

Nice but will it hold the entire space required for the content all the time?
Great work though ...

Thanks effone. Yeah I updated the demo with a longer example. It'll work with any amount of text.

Thats nice. But what I meant was when the spoiler content is hidden it still is holding the same required placeholder height - resulting a blank grey box. Isn't it possible to reduce the height while hidden and expand displaying the content on hover?

Love your works Eric. Either way, Its just awesome.

Thanks for the suggestion effone. I've added another CSS code to the first post, which animates the height. However it also has a max height of 500px (Since transitions don't work with height: auto; ).

This is very nice. In the demo, the text was the last post and was overlapping out of the border. Any way to prevent that?

Whoops. xD Which browser are you using?

(2013-04-25, 01:26 PM)Eric J. Wrote: [ -> ]Whoops. xD Which browser are you using?

Chrome, but this occurs only on a small screen. :/ On my netbook. On a regular desktop, it's fine.

nice, maybe javascript would solve the other compatibility issues across devices like iHydra has with the netbook. Just and idea nice work!

this one not work on 1.6.10