Creating a Hide/Show (Spoiler) Feature

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

Originally Posted by 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('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[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]

Originally Posted by Alviker

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 : [hide=Spoiler]Simalert.com is the best[/hide]

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 [hide=TITLE HERE] TEXT HERE [/hide]

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
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/sho...236#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]

Originally Posted by 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.

Thanks Cutulus and I'll let ya know how it goes!