Spoiler tags

By leigerleiger

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:

/* Add a spoiler tag */
 
.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!

rating: +21+x
Add a New Comment
page revision: 1, last edited: 03 Nov 2009 13:30
Edit Rate (+21) Tags Discuss (7) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License