[Giving you, not asking for] Spoiler BBcode with show button

Discussion of general topics related to the new version and its place in the world. Don't discuss new features, report bugs, ask for support, et cetera. Don't use this to spam for other boards or attack those boards!
Forum rules
Discussion of general topics related to the new release and its place in the world. Don't discuss new features, report bugs, ask for support, et cetera. Don't use this to spam for other boards or attack those boards!
Post Reply
CombatGold1
Registered User
Posts: 9
Joined: Wed Oct 22, 2003 9:56 am
Location: Thornhill, Cardiff, South Wales, United Kingdom
Contact:

[Giving you, not asking for] Spoiler BBcode with show button

Post by CombatGold1 »

Hello, I've been searching around to see if anyone has posted a custom BBcode for spoilers, but they all look like highlight to show.

I found this one from google, and adapted it for phpBB3. The beauty is that you can use colours and smilies without them showing up, or evading the whole point of the spoiler BBcode.

Working Sample - Bare in mind it requires Javascript, or it won't work.

To use it:

Code: Select all

[spoiler]My Text, including smilies and colour.[/spoiler]
Custom BBcode Usage:

Code: Select all

[spoiler]{TEXT}[/spoiler]
Custom BBcode HTML:

Code: Select all

<div><div class="quotetitle"><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.visibility != 'visible') {	this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.visibility = 'visible'; this.innerText = 'Hide'; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.visibility = 'hidden'; this.innerText = 'Show'; this.value = 'Show'; }"></div><div class="quotecontent"><div style="visibility: hidden;">{TEXT}</div></div></div>
Yes, I know it's laid out for 1 line. You can split it up if you really must, but remember the source layout.

I hope you like it anyway :)
Image

muse-ic
Registered User
Posts: 95
Joined: Sun Aug 21, 2005 12:23 am

Re: [Giving you, not asking for] Spoiler BBcode with show button

Post by muse-ic »

thanks for code

User avatar
Highway of Life
Registered User
Posts: 1399
Joined: Tue Feb 08, 2005 10:18 pm
Location: I'd love to change the World, but they won't give me the Source Code
Contact:

Re: [Giving you, not asking for] Spoiler BBcode with show button

Post by Highway of Life »

Yeah, I love that code... we have used it for nearly 6 months on STG.
One thing we do when posting large amounts of code is enclose it in the spoiler so that the user does not have to scroll for eternity to get to the end of a post...
An example usage:

Code: Select all

[spoiler][code=php]code here[/ code][/spoiler]
Also works great for large pictures, where you don't want to take up a bunch of post real estate.

[edit]I just realized, the spoiler is using visibility, instead of display...
putting code inside of those spoilers doesn't help, since it's still using all of the space anyways...
This is the version we are using:

Code: Select all

<div style="margin:20px; margin-top:5px"><div class="quotetitle"><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="quotecontent"><div style="display: none;">{TEXT}</div></div></div>
Example

[/edit]
Image

Post Reply