MyBB Community Forums

Full Version: Spoiler code
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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:

[attachment=38972]
Looks good, thanks for sharing your code with us! Smile
(06-02-2017, 01:24 PM)katos Wrote: [ -> ]Looks good, thanks for sharing your code with us! Smile

Thanks!
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]
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\]
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?
did you edit the global.css file correctly ? Have you clear your browser cache (ctrl + F5) ?
(10-07-2018, 10:05 PM)Crazycat Wrote: [ -> ]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!!!  Blush

Many thanks for this lovely code! 

Could you make a add-on from it? (for newbies like me...)
Nice code Smile
i want to add

[hide] [/hide]

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

how is that possible ?