Creating a Hide/Show (Spoiler) Feature

[OrangeFlea]

As shown in this person's signature:

http://boards1.wizards.com/showpost.php?p=7412200&postcount=1

How does one make it look exactly like that?

[Blindchild02]

yeah thats pretty nice.

[OrangeFlea]

Bump.

Come on. Will no one even attempt this?

[Oblivion Knight]

I may look in to this one later if nobody else does.. :)

[Paul M]

Just view the source .........


<div style="margin:5px 20px 20px 20px">

<div class="smallfont" style="margin-bottom:2px"><b>Spoiler:</b>

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

</div>

<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">

<div style="display: none;">

HIDDEN TEXT HERE

</div>

</div>

</div>

[Funchiestz]

can u teach me how to implement that one in my 3.5 ?

[utw-Mephisto]

gimme 5 minutes ... can be done by bbcode ...one sec

Go to your BBCode Manager :

with these settings :

http://ut2007world.com/images/bb.jpg

As replacement code you can use the one Paul posted instead of HIDDEN TEXT HERE, you use {param}.

Preview should be then :

http://ut2007world.com/images/bb2.jpg

Of course you can use anything, you don't have to call it spoiler2

and since bbcode can be used in signatures, you'll get that result

[Chris M]

Very nice spoiler code :)

Chris

[utw-Mephisto]

Another spoiler code would be

http://img246.imageshack.us/img246/9062/16tw.jpg

And when you mouseover :

http://img246.imageshack.us/img246/6361/28hn.jpg

Settings :

http://img246.imageshack.us/img246/9435/untitled1xd.jpg

[COBRAws]

There's a spoiler hack just released: https://vborg.vbsupport.ru/showthread.php?threadid=97728

At least its something

[PamelaE]

I have to say the hide/show button is much more sophisticated than the usual outdated highlighted text approach.

I think its great. Thanks for shareing this, I have just implemented it.

Thanks :)

[Alviker]

Just view the source .........


<div style="margin:5px 20px 20px 20px">

<div class="smallfont" style="margin-bottom:2px"><b>Spoiler:</b>

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

</div>

<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">

<div style="display: none;">

HIDDEN TEXT HERE

</div>

</div>

</div>


Don't run in my vB 3.5.1!!! :( :( Help please!!! :( :( How Can I add totally this BBCode??? Sorry for my bad english :( :(. Help please. Very thanks.

Atte. Alviker

[simalert]

Don't run in my vB 3.5.1!!! :( :( Help please!!! :( :( How Can I add totally this BBCode??? Sorry for my bad english :( :(. Help please. Very thanks.

Atte. Alviker
It works great for me, I have the following

TITLE : Hide

TAG : hide

REPLACEMENT :

<div style="margin:5px 20px 20px 20px">

<div class="smallfont" style="margin-bottom:2px"><b>{option}:</b>

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

</div>

<div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;">

<div style="display: none;">

{param}

</div>

</div>

</div>


Example : Simalert.com is the best

Description : Allows you to hide text until someone presses the button.

Ideal for large code or spoilers.

USE OPTION : Yes



I added {option} in there so you can specify the title.

To use this you type TEXT HERE

It works great on my 3.5.3 board (still getting ready to switch to it from PHPBB)

[Cutulus]

Right now your current code has it say --> {option}:
When they use the script tags. What if I wanted to do [script=$$] How would you change the code to show $$?

[yumyumcat]

What if you want to just use this in posts and not your signature?

How do you install it? Help! I really would love this for my Board :D
Thanks in advance.

I just installed this, made a button for my Board and thought I had it figured out, but it's not working ~ :(

Someone out there that can advise?

[Cutulus]

If you use simalert's instructions it should work out just fine. Verify that you it installed as they posted first. If you do not want it used in the signatures you can just use a usergroup's Signature permissions to not allow it.

Just to make sure you know where to put it...
Admin panel
BBcode Manager
Click the Add new BB code

[yumyumcat]

I did that hon ~ and it's working, but only if I modify it when I post ~ see it shows it's supposed to work in my admin panel, but when I go to use it on my Board it looks totally different!

Check this out: http://www.thecatarena.com/forum/showthread.php?p=168236#post168236
Now, this is how it looks when I press my spoiler button
I'm going to put spaces in the code here cause on my board I can't show the code to others without doing this *beats me*!

[ hide= "this is wrong" ] [ / hide ]

now all I have to do to correct it while posting, which is a pain in the arse is this:

[ hide= Spoiler ] this is correct [ / hide]

see? It's really strange! I didn't modify anything that Simalert posted

How do I get that to include SPOILER close it up and not use the quotation marks as well as that other tag closure on the comment?~

Oh, and it works in my admin panel, but not on the Board! Now that's Weird!

[Cutulus]

Try leaving out the =**** in the code and see if that works. I was having the same problem and we are looking for the same thing here.
What you currently get:
Spoiler: Show

What you want:
Look at my cat: Show

This is what I am looking for, and by the code you list that is what it looks like you want also.

[yumyumcat]

Try leaving out the =**** in the code and see if that works. I was having the same problem and we are looking for the same thing here.
What you currently get:
Spoiler: Show

What you want:
Look at my cat: Show

This is what I am looking for, and by the code you list that is what it looks like you want also.
Thanks Cutulus and I'll let ya know how it goes! :D