spoiler box

by **konmanrocks** » Mon May 18, 2009 3:22 am

can we get a spoiler box as seen in the giantitp.com/forums the brown box than you click on to expand?

just another idea that i think works well in a forums environment

by **Ichthus** » Mon May 18, 2009 4:04 am

code from GiantitP

Code: Select all: <div class="pre-spoiler"> <span style="float: left; padding-top: 2px;">Spoiler</span> <input value="Show" style="margin: 0px; padding: 0px; width: 80px; font-size: 10px;" 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.value = 'Show';}" type="button"> </div> <div> <div class="spoiler" style="display: none;">{{{1}}}</div> </div>

by **Gerwulf** » Tue Jun 09, 2009 2:36 am

I second this request.

by **Arkenputtyknife** » Tue Jun 09, 2009 3:48 pm

I would prefer a method that did not rely on JavaScript. As far as possible I browse with JS disabled, since it causes endless headaches with every browser I've ever used, even the most up-to-date ones.

Style sheets are capable of making text invisible, or disappear altogether, until the mouse enters the area. I've seen this used on some sites to make pull-down menus without a line of JS anywhere.

by **Arkenputtyknife** » Sat Jun 20, 2009 1:10 pm

Okay, here's a simple HTML page showing how it's done:

Code: Select all: <html> <head> <style> dl.spoiler dd {visibility: hidden;} dl.spoiler:hover dd {visibility: visible;} </style> </head> <body> some text <dl class='spoiler'> <dt>Spoiler</dt> <dd>This stuff is invisible</dd> </dl> more text </body> </html>

Copy it into an HTML file, open it in your browser, and mouse over the spoiler to see it. Substitute whatever you prefer for the dl…dt…dd.

As you can see, it's much simpler than the JavaScript (most things are, in my experience; JavaScript is a bitch—should never have been invented) and almost laughably obvious. What's more, it's versatile; you could, for example, use color and background properties to blank out the spoiler rather than visibility.

Unfortunately, thanks to the :hover selector, I can't see a way of doing this in an inline 'style=' qualifier, but I really can't see why there should be any problem with putting the style in the page template header or a style sheet.

by **harknell** » Wed Jun 24, 2009 8:06 am

This is a test of the new spoiler tag:

Spoiler following!:

Spoiler: show

by **harknell** » Wed Jun 24, 2009 8:07 am

Seems to be working! Let me know if it doesn't work for anyone in any browser/system.

spoiler box

spoiler box

Re: spoiler box

Re: spoiler box

Re: spoiler box

Re: spoiler box

Re: spoiler box

Re: spoiler box

Who is online