When using the Spoiler code, I often use it for "hints."  However, when you type in, for example <spoiler Number 1> (meaning "hint number 1"), it generates the discription "Spoiler for Number 1," which can be confusing.

I'd recommend taking out the automatically populating "for" in there for those of us who use it for more than just spoilers (or who don't want the "for" in there), or perhaps adding a "hint" or "clue" type of code that acts the same way as spoiler.

The "for" can always be manually typed in if wanted, but right now, we can't remove the "for," which makes the titles of the spoilers make no sense in some cases.

I'd go a little further.  I would suggest that, if you type any text at all for a label, it doesn't even say 'spoiler', thus giving you complete freedom of labeling.  Of course, if you don't give it a label, it still says 'Spoiler', as it has to say something.

---

Spoiler for Hint 1: (Highlight or hover over the text to view)
For example, this tag would have read 'Hint 1'

---

On a completely related topic, is there a significant reason that spoilers here on rpol do not collapse the hidden text?  Is this just javascript shenanigans, or has no one mentioned it before?  On other sites, people often use spoiler tags to collapse huge posts down to a table of contents of sorts.

The text is not collapsed because <spoiler> doesn't use javascript.  Basically the tags just change the text colour to blend with the background.

I totally agree.  Taking out "Spoiler" would be even better because then I could just type something like this:

<spoiler Hint 1> and it would read "Hint 1" at the top instead of the current "Spoiler for Hint 1."

Yeah, tis true. If you just highlight over the area you'll see the text. Kewl beans! Thx BBR!

Yep, it's done that way so that the spoiler will still work on a machine that doesn't like javascript.

Is there any way to collapse walls of text in that way?  Then there is a button that expands/collapses it.  If not, I feel it would be a good idea.

If it uses css, it would be display: none to hide it and not take up space, and you could perhaps set it to change once it's hovered or clicked on.

So you'd have the introductory text saying there's a spoiler that comes up when a spoiler is used, and the hidden text would be whatever's within the tags. But you'd have to click on something.. because whatever's hidden wouldn't be visible at all. Normally there's a highlighted area but that wouldn't be there if it's changed. So I guess that leaves clicking on the introductory spoiler text, but wouldn't work because it's not hidden. It sounds like you'd need javascript.
This message was last edited by the user at 02:51, Sat 20 Apr 2013.

+1 for being able to create a spoiler without the words "spoiler for" automatically appearing.

+1, as well, or at least a way to turn it off.

BTW, adrasteia's point that spoiler sections could be made display:none; using just css is correct.  This seems to work fine, though I haven't tried it in IE.

<style>
div.wrapper div.hidden {
   display:none;
}
div.wrapper:hover div.hidden {
   display:block;
}
</style>

<div class='wrapper'>
   This is some lead-in text
   <div class='hidden'>
       This is some hidden text.
   </div>
   <div>
       This is text after the hidden part.
   </div>
</div>

I'm well aware of the CSS required, however that also requires javascript to dynamically change the CSS to reveal the text.  If a user doesn't have javascript enabled then there's no way to see the text.  This is why we have the invisible (rather than completely missing) text - a user without javascript can still highlight the section to see the text.

GM's have the option of using <spoiler mode=silent> which doesn't include the preamble or separating lines, but the text does still take up the appropriate amount of space (for the same reason as above).

Actually, no.  The CSS I have above works to hide and show the text with no javascript.  It makes use of the fact that you can cascade from a :hover type.
This message was last edited by the user at 00:01, Fri 31 May 2013.

In reply to Zag24 (msg # 12):

Only if the browser supports :hover, which only the newer ones do (all browsers support it for hyperlinks, but it's implementation into other elements was slow).  JS is required to cover the rest.

It's also rather difficult for touch screens to hover.  By difficult I mean either problematic or impossible.

We'd also need it inline, and I'm not sure how hovering over an element that takes up no space would go.

I've never cared for the current spoilers.  Honestly, I stopped using them because they were awkward to read.  Personally, I would go with something like the code posted below for spoilers.

With this example, the browsers without JS support should get the color matched invisible due to the default style selection of the hide class.  However; the browsers with JS support can call dynamicSpoilers via the pages onload event.  This way, as soon as the page comes up, it runs through and drops the large empty blocks from the screen and makes them dynamically expandable.  This would also have the advantage of not requiring the mouse to hover over the field (which can be a real pain sometimes).

I have no real experience with CSS, but the spoilblock class below should just inherit med.  It's just used to type the correct blockquotes as spoilers.

---

Example:
<html>
<head>
<script type="text/javascript">
// would normally be included in the JS file

//Called on page load to hide all spoilers
function dynamicSpoilers(){
   spoilers = document.getElementsByClassName('spoilblock');
   for (i=0; i < spoilers.length; i++){
      newvis(spoilers[i]);
   }
}

//toggles the spoiler
function newvis(spoiler){
   spans = spoiler.getElementsByTagName('span');
   if (spans[1].style.display == 'none'){
      spans[0].innerHTML = '<b>Spoiler text:</b> <font class="sm">(Click here to hide)</font>';
      spans[1].style.display = 'inline';
      spans[1].className = null;
   } else {
      spans[0].innerHTML = '<b>Spoiler text:</b> <font class="sm">(Click here to show)</font>';
      spans[1].style.display = 'none';
   }
}
</script>
</head>

<body onload="dynamicSpoilers()">

<blockquote class='spoilblock'><hr />
   <span onclick="newvis(this.parentNode)"><b>Spoiler text:</b> <font class='sm'>(Highlight to view)</font></span>

   <span class='hide'>I'm a bunch of hidden text.&nbsp;</span>
   <hr />
</blockquote>

</body>
</html>

The advantage of the current spoilers is that they don't use Javascript or JQuery. Not all devices run Javascript properly and some people have it disabled. While Javascript can give a cleaner effect overall, it's at the cost of more complex code/the fact it might not run so well on certain devices. While this site makes use of Javascript in some places, I seem to remember this coming up in conversation before and this was something akin to the argument against changing it.

The current spoilers don't NEED JavaScript, they still use.  Check the code.  Its their.  I just proposed using it a different way that would likely be just as supported.

It's not the proposal of javascript that's the problem, it's the use of "display: none" that's the issue.  Setting the display to none means the text is not displayed at all, the surrounding text collapses around it.  A non-javascript enabled client will not be able to display the text, no matter what they do.

In the example I posted, it supports non-javascript clients.  The field isn't hidden by default.

I included two functions.  The second one is the simple toggle to display or hide.  The first one would be called from the pages onload event.  It collapses all the spoilers as soon as the page loads.  If a client doesn't support scripting, then the collapsing isn't performed.

+1 if you can get the spoiler to collapse and hide images as well.

I don't really use the current version because of its limitations.
This message had punctuation tweaked by the user at 21:58, Wed 05 June 2013.

My proposed change would collapse everything within the containing elements that are classed as hide.

+1 for collapsing spoiler
+1 for hiding images.

I've wanted to hide images for a long time, especially for the shock or surprise value of revealing a monster instead of the picture hitting them before they read the text.

Another +1 if you could hide audio there.  I've used howls, screams and things occasionally.  It would be great if it surprises them when they go to the spoiler.

@Heath, are you launching audio in an rpol post somehow?