How to add this spoiler ? bbcode

[katie hunter]

I am currently using a different one on my forum but I like this version more used on Discourse forum. It blurs txt or images until you click on it to see it.

Ex https://meta.discourse.org/t/folding-spoilers/16123/2

How can I add this spoiler to my custom bbcode ? What would be the HMLT code for it ?

[Lynne]

This is in the source code for that:

<span class="spoiled" style="background-color: transparent; color: transparent; text-shadow: 0px 0px 10px black; cursor: pointer;">This is a spoiler</span>

So, perhaps try that html.

(I don't know why they have given it a class when they haven't even defined the class in the CSS and instead using it inline.)

[katie hunter]

Hi Lynne, thanks.

The version i use on my forum is this

<div style="margin: 0px;"> 
<div class="smallfont" style="margin-bottom: 2px;"> 
<strong>Spoiler!</strong> <input value="Show" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'inline') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'inline'; this.innerText = ''; this.value = 'Hide'; } 
else 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value='Show'; }" type="button" />
</div> 
<div class="alt2" style="border: 0px inset; padding: 0px;"> 
<div class="spoiler" style="display: none;">{param}</div> 
</div> 
</div>

It is not working. I tried the code you send me but it doesn't open i.e., txt or image would show once i click on the blurry stuff.

Originally Posted by Lynne

(I don't know why they have given it a class when they haven't even defined the class in the CSS and instead using it inline.)

They're using Ruby on Rails, not sure how that language works with css.

[Lynne]

Their spoiler js is in here - https://meta-discourse.r.worldssl.ne...7955c85949a.js So, you'd have to un-minify it in order to grab it.

[katie hunter]

This looks rather complicated, i don't think it is that complicated... but i will ask around more.

--------------- Added [DATE]1401846448[/DATE] at [TIME]1401846448[/TIME] ---------------

the code would be something similar to this but not exactly working the same way

<div style="margin: 0px;"> 
<div class="smallfont" style="margin-bottom: 2px;"> 
<strong>Spoiler!</strong> <input value="Show" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != 'inline') 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'inline'; this.innerText = ''; this.value = 'Hide'; } 
else 
{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value='Show'; }" type="button" />
</div> 
<div class="alt2" style="border: 0px inset; padding: 0px;"> 
<div class="spoiler" style="display: none;">{param}</div> 
</div> 
</div>

[katie hunter]

Hi Lynne, would this file help built this spoiler bbcode ?

https://github.com/discourse/discour...pts/spoiler.js