Spoiler Tag

Title: Spoiler
Tag: spoiler
Replacement:

 <div class="fieldset">
<table class="tborder" cellpadding="5" cellspacing="0" border="0" width="100%" align="center">
<tr>
   <td class="tcat" colspan="3"><a style="float:right" href="#top" onclick="return toggle_collapse('spoiler_{option}')"><input type="button" value="Show/Hide" /></a>Spoilers!</td>
</tr>
<tbody id="collapseobj_spoiler_{option}" style="">
<td class="alt1" align="$stylevar[left]" valign="top">{param}</td>
</tbody>
</table>
</div>

Example: [spoiler=example]This is Hidden![/spoiler]
Use Option: Yes
Image: Leave Blank

Q. Why do I have to "use option"?
A. This will solve a bug when not using it. In the first coding it wasn't used, but it would only collapse the first usage of "[spoiler][/spoiler]" in the thread. Using option in the code allowed to to specify which usage of the tags to collapse.

Bugs: It's open by default! I'm working on getting it closed by default.

[King Kovifor]

Originally Posted by Danny W

I noticed if you have more than 1 spoiler on a page the buttons only open the first one.

The spoiler tag should include:

[spoiler=SOMEUNIQUE_ID]and it'll collapse for all of them[/spoiler]

[dartho]

I changed this ever so slight for my own uses - still all the original code.

I've called the code JOKE

<div class="fieldset">
<table class="tborder" cellpadding="5" cellspacing="0" border="0" width="100%" align="center">
<tr>
   <td class="tcat" colspan="3"><a style="float:right" href="#top" onclick="return toggle_collapse('spoiler_{option}')"><input type="button" value="Click Me" /></a>{option}</td>
</tr>
<tbody id="collapseobj_spoiler_{option}" style="display:none;">
<td class="alt1" align="$stylevar[left]" valign="top">{param}</td>
</tbody>
</table>
</div>

So bascially it shows the joke, and you click the "Click Me" button to show the punch line

Nice Hack - Thanks!!

[King Kovifor]

Originally Posted by dartho

I changed this ever so slight for my own uses - still all the original code.

I've called the code JOKE

<div class="fieldset">
<table class="tborder" cellpadding="5" cellspacing="0" border="0" width="100%" align="center">
<tr>
   <td class="tcat" colspan="3"><a style="float:right" href="#top" onclick="return toggle_collapse('spoiler_{option}')"><input type="button" value="Click Me" /></a>{option}</td>
</tr>
<tbody id="collapseobj_spoiler_{option}" style="display:none;">
<td class="alt1" align="$stylevar[left]" valign="top">{param}</td>
</tbody>
</table>
</div>

So bascially it shows the joke, and you click the "Click Me" button to show the punch line

Nice Hack - Thanks!!

It's for your use. And if you want to change it to be used with jokes. Go right a head.

[ArchEnemy]

Thank you for that code (the joke one too). I find it useful to set the title of the hidden field, but would be even nicer when it would use a default name when nothing was specified.

When you add class="button", the button comes in the css style. Looks better.

<input type="button" class="button"

Ok, after some testing, ... another variation of the code above. It creates a box with a textlink (option), which opens and closes the box. So this one is without any additional ugly buttons.

<div class="fieldset">
<table class="tborder" cellpadding="5" cellspacing="0" border="0" width="100%" align="center">
<tr>
   <td class="tcat" colspan="3"><a style="float:left" href="#top" onclick="return toggle_collapse('spoiler_{option}')"><input type="hidden" value="{option}" />{option}</a><br></a></td>
</tr>
<tbody id="collapseobj_spoiler_{option}" style="display:none;">
<td class="alt1" align="$stylevar[left]" valign="top">{param}</td>
</tbody>
</table>
</div>

[sbrum]

Originally Posted by King Kovifor

The spoiler tag should include:

[spoiler=SOMEUNIQUE_ID]and it'll collapse for all of them[/spoiler]

This does not work for me either. Sometimes the first button opens the second spoiler.

[sbrum]

Originally Posted by sbrum

This does not work for me either. Sometimes the first button opens the second spoiler.

Sorry, its working now.

[Disasterpiece]

Hi

I wanted to use the option param, so the user could use this for his own text on the button.

so when he uses [spoil=hideMe]xyz[/spoil] then, the Button says "hideMe".

i'm looking for a better way for the unique id. creating a random id would be perfect, but i don't think this is possible in html. any solution?

[King Kovifor]

If you install the multi option hack somewhere here on the forum, you could change this up to be [spoil=hideMe|uniqueID]xyz[/spoil]. I'm not sure how you'd do the HTML, since I've never used the hack, but I know it exists.

[Adrian Schneider]

The unique identifier should be generated by PHP (hash, microtime, etc).

Then you could do [spoiler]HE DIES IN THE END![/spoiler] or if you want ... [spoiler=WARNING]HE DIES IN THE END[/spoiler] which would replace the default caption.

Just an idea to simplify the use.

[Disasterpiece]

Yeah, im kind of a noob in php, i can only html ^^

so, this is my modified code:

<div class="fieldset">
<table cellpadding="5" cellspacing="0" border="0" align="center">
<tr>
   <td colspan="3" align="center"><a href="#top" onclick="return toggle_collapse('spoiler_{option}')"><input type="button" value="{option}" /></a></td>
</tr>
<tbody id="collapseobj_spoiler_{option}" style="display:none;">
<td align="$stylevar[left]" valign="top">{param}</td>
</tbody>
</table>
</div>

i used the option param for the button's value AND the spoiler id. works in 80%; when users use different values for the buttons, but i wanted to use it in the signature. So there would be many buttons with the same id.

is it possible to use php code in the code field? when yes, could you give me the php code for creating a random number? would be great