Spoiler code

[suraf]

Every time I try to find a spoiler code, they either don't look right or just don't know what to say about it. So I came up with my own.

Name:

Spoiler

Regular Expression:

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

Replacement:

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

global.css:

.spoilerBox {
   border-radius: 5px;
   padding: 5px;
   border: 1px solid #CCC;
	padding: 10px;
	background-color: #F5F5F5;
}

.spoilerTitle {
	border-bottom: 1px solid #CCC;
	font-weight: bold;
	padding-bottom: 3px;
	margin-bottom: 10px;
}

.spoilerOpen, .spoilerClose {
    font-size: 0.8em;
	float: right;
}

Images to see how it'll look:

   

[katos]

Looks good, thanks for sharing your code with us!

[suraf]

Looks good, thanks for sharing your code with us!

Thanks!

[Mordicus]

Please, could you help and explain how to install & add this code to make it the default spoiler?

What is "Regular Expression" ?

Does it work just using the default code?

[spoiler][/spoiler]

[Crazycat]

You have to create a new MyCode in ACP » MyCode and fill the fields "Name", "Regular Expression'", "Replacement" with the codes given.
And edit global css (ACP » Themes » Default » Editing global.css) to add the css part.

To make it work with the default code, you have to change 1 thing:
Regular Expression

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

[Mordicus]

Many thanks for your reply, it works!  

However there is no color at all like in the example (in the example given above, there is a grey color background...). How cannot add color? Is this code already outdated?

[Crazycat]

did you edit the global.css file correctly ? Have you clear your browser cache (ctrl + F5) ?

[Mordicus]

did you edit the global.css file correctly ? Have you clear your browser cache (ctrl + F5) ?

Sorry for the late reply, I was far away from home...

I did it, cleaned the cache, but it did not work immediately. Now, suddenly, it is working!!! 

Many thanks for this lovely code! 

Could you make a add-on from it? (for newbies like me...)

[Ikerepc]

Nice code

[blackhatstudent]

i want to add

[hide] [/hide]

add button in show thread editor while writting content code in my forum

how is that possible ?