MyBB Community Forums
Spoiler code - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: MyCodes (https://community.mybb.com/forum-117.html)
+--- Thread: Spoiler code (/thread-210836.html)



Spoiler code - suraf - 06-02-2017

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]


RE: Spoiler code - katos - 06-02-2017

Looks good, thanks for sharing your code with us! Smile


RE: Spoiler code - suraf - 06-02-2017

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

Thanks!


RE: Spoiler code - Mordicus - 10-02-2018

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]



RE: Spoiler code - Crazycat - 10-03-2018

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



RE: Spoiler code - Mordicus - 10-06-2018

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?


RE: Spoiler code - Crazycat - 10-07-2018

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


RE: Spoiler code - Mordicus - 10-20-2018

(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...)


RE: Spoiler code - Ikerepc - 10-22-2018

Nice code Smile


RE: Spoiler code - blackhatstudent - 03-05-2019

i want to add

[hide] [/hide]

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

how is that possible ?