Ever wanted to hide some text from someone when the page loads, but make it easily accessible when they want to read it? That's usually what spoiler tags are used for.
Description
Ever wanted to hide some text from someone when the page loads, but make it easily accessible when they want to read it? That's usually what spoiler tags are used for.
Because I needed it for a private site of mine, I decided to create a type of spoiler tag. From what I can tell there is no tutorial on this on either the community or snippets site — yet.
Code
Add this code to your wiki's theme:
/*Addaspoilertag*/ .spoiler{background-color:#000000; padding-left:10px; padding-right:10px; padding-top:3px; padding-bottom:3px; color:#000000; }.spoiler:hover{background-color:#E5FFE7; }
Then, wherever you want to use it, just use the class called spoiler. For example:
[[div class="spoiler"]]
This text is hidden by a
spoiler box.
Someone just needs to hover the mouse over it to view the text.
[[/div]]
In action
The example used above is shown here:
This text is hidden by a
spoiler box.
Someone just needs to hover the mouse over it to view the text.
Rate this solution
If you think this solution is useful — rate it up! =)
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by leiger
Rate this solution
If you think this solution is useful — rate it up!
Have got an updated version done now. http://css-competition.wikidot.com/package:5/noredirect/true
When the competition ends I'll update this page with the new code.
Looking for thoughts, opinions, suggestions, etc…
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
This is quite big… the spoiler tag is easely spoiled because it is so big… maybe a popup with a small "hot" zone that triggers the popup is also a good idea…
Can you give an example site where this is used?
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
This works pretty well to allow the spoiler to be small when hidden and expand on hover. It acts a bit like a pop-up. I tweaked the colors and added some rounded corners.
/*Addaspoilertag*/ .spoiler{background-color:#FF0000; padding:3px10px; color:#FF0000; width:5px; height:5px; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }.spoiler:hover{background-color:#E5FFE7; color:#000000; width:100%; height:100%; }
You can test it on this site on the sample above using Firefox with Web Developer or Firebug.
[edit - I just included this on one of my sites. View live demo.]
-Ed
Hmm, that looks like a better idea. I think having the text "spoiler" would be better… but as that can't be done with CSS it means this needs to become a CSI and become a bit more complicated (I'd prefer to keep it simple)
Will have a look at how your code works later , :)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
I think having the text "spoiler" would be better...
Yes, I was thinking that maybe a background image could be worked somehow to act as the "spoiler" text. Is color: transparent; supported across all browsers? I seem to recall that it isn't for some reason.
If it is, it should be a simple matter to make the text transparent and then place a background image in the div to hide the spoiler content and then undo all that on the hover event.
-Ed
Has only been used on a private site… so linking you there won't really help much ;-)
I use it as part of a "quiz" in a way… for revision, to guess the answer before I check if I got it correct or not.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Okay, I've edited this site's CSS, and the example is working now.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server