Spoiler button

[yerkyerk]

Added a spoiler button

Answer to Life, the Universe and Everything:

WARNING: This box contains a spoiler

show me

I'm not sure if it works as it should...

[jiaco]

Originally Posted by yerkyerk

Added a spoiler button

Answer to Life, the Universe and Everything:

I'm not sure if it works as it should...

WARNING: This box contains a spoiler

show me

Cool though that it works inside the QUOTE!

[yerkyerk]

Lol, yea, it's the other way around. I'm trying to adapt the YouTube one, but I really don't know much HTML anymore..

[yerkyerk]

Currently, I've got this

<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="466">
<tr>
<td class="smallfont">
<strong>IMPORTANT NOTICE:</strong> This contains a spoiler</div></td></tr>

<tr>
<td class="smallfont" align="right">
<a href="#" onclick="return toggle_collapse('{param}')"> Show me the spoiler!</a>
</td></tr><tbody id="collapseobj_{param}" style="display:none;">
<tr>
<td class="alt1" align="center">
</td></tr></tbody>
</table>

Which turns into this; [spoiler2]whatever[/spoiler2]
But I don't know how it should show any text... I think it's something with param, but I don't know..

[Wyvern]

Look, even I can make spoilers!

WARNING: This box contains a spoiler

show me

That doesn't work, does it?

[yerkyerk]

Well, it allows you to hide spoilers once you've seen them

[Wyvern]

Then for me it doesn't work properly.

Can't you fix it, Yerk?

In the meantime, I'll have fun using:
[spoiler2]Aysewm!![/spoiler2]

Wait. IT DOESN'T SHOW ANYTHING!

Can you fix both, yerk?

[jiaco]

<input type="button" value="Show Spoiler!" style="width:100px;font-size:12px;margin:10px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(' div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('d iv')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('d iv')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('d iv')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('d iv')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" />

<div id="show";display: none;margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%">
<img src="http://www.hardfitness.com/emagazine/issue9/images/DSC_3124.jpg" border="0" alt="" /></div>

Actually this is what the HTML looks like and there is a problem with the div after id="show" there is no style=" before the css code (which actually starts with a semi-colon which should not be there...)

Can you try this:
<div id="show" style="display: none;margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%">


I leave the rest of this junk here for now:


If this is your code:

<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="466">
<tr>
<td class="smallfont">
<strong>IMPORTANT NOTICE:</strong> This contains a spoiler</div></td></tr>

<tr>
<td class="smallfont" align="right">
<a href="#" onclick="return toggle_collapse('{param}')"> Show me the spoiler!</a>
</td></tr><tbody id="collapseobj_{param}" style="display:none;">
<tr>
<td class="alt1" align="center">
</td></tr></tbody>
</table>

Then everything between <tbody> ... </tbody> should start off on style="display:none;"

the onclick function should then set the style to "display:block;" in order to show it.

I do it like this

javascript:

function HIDE( id )
{
document.getElementById( id ).style.display = "none";
}
function SHOW( id )
{
if( document.getElementById( id ) ) {
document.getElementById( id ).style.display = "block";
}
}
function TOGGLE( id )
{
if( document.getElementById( id ) ) {
if( document.getElementById( id ).style.display = "block" ) {
HIDE( id );
} else {
SHOW( id );
}
}
}

HTML:
<div id="spoiler" style="display:none;" class="spoilertext" onmousedown="TOGGLE( spoiler );">TEXT TO HIDE</div>

Of course if you can use css then

.spoilertext
{
display:none;
}

removes the need to set the style in the div if you set the class

Its one or the other, both is overkill.

[bonobo4]

" style="display:none;">

WARNING: This box contains a spoiler

')"> show me

I like this idea, though I can't see the point of it!

[yerkyerk]

@jiaco: thanks for helping out, heh even though I couldn't follow what you were typing

I just had to put in {param} somewhere in the commands (as well as copying back some stuff from the youtube thing). Anyway, it should work now:

WARNING: This box contains a spoiler

show me

Current code for spoiler:

<table class="tborder" cellpadding="6" cellspacing="1" border="0" width="466">
<tr>
<td class="smallfont">
<strong>IMPORTANT NOTICE:</strong> This contains a spoiler</div></td></tr>

<tr>
<td class="smallfont" align="right">
<a href="#" onclick="return toggle_collapse('{param}')"> Show me the spoiler!</a>
</td></tr>
<tbody id="collapseobj_{param}" style="display:none;">
<tr><td class="alt1"><object>{param}
</object></tr></td></tbody>
</table>