initially hide content, and only reveal it when the visitor clicks/taps on it.
There are occasions you don’t want certain content on your website to show immediately. When you’re a reviewer of movies, books, games, etc. you may want to initially hide those parts that reveal plot elements. Or you may need to prevent visitors to be confronted with NSFW content without their consent.
The Spoiler Stack is the solution in these kind of situations. Content will by covered or blurred by default, and only revealed when the visitor clicks/taps on it.
Demos Here’s an example of the Spoiler Stack in action on inline text:
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don’t know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I’m breaking now. We said we’d say it was the snow that killed the other two, but it wasn’t. Nature is lethal but it doesn’t hold a candle to man.
For more examples of the many possibilities, please visit demo page #1. There’s also a demo page #2 with (almost) identical examples, but combined with my TippyTitle Stack to show cool tooltips on the spoilers.
Determine what you want to hide initially:
the whole content of the stack also great for images
all text with a class… works everywhere on the page, but you will have to set the class(es) manually like: And they <span class=spoiler>lived happily ever after</span>.
underlined text in the stack ideal for inline text, easy to apply, but does not work well with links in the stack
Set the effect to blur or cover
Optionally, change the cursor to a question mark when hovering over a hidden element and/or a ‘ban’ symbol when hovering over a no longer hidden element
Set the tooltip (title) text to show when hovering over a hidden element and when hovering over a no longer hidden element the tooltip text can be styled with the TippyTitle Stack (see below for the limitations)
There are two sections in the stack that apply only with a combination of options:
the whole content of the stack + cover
all text with a class… or underlined text in the stack + blur
Don’t use links with the option apply to underlined text in stack, it won’t work. Use classes instead.
When using blur you may want to set some padding on the content of the Spoiler Stack to prevent the blur from being cut of.
The TippyTitle Stack can only show the tooltip text that is supposed to show when hidden. For this reason, I suggest to leave the tooltip text when visible empty, and use a text like spoiler - click to show/hide for the visible tooltip. See demo #2 for examples.
Background This stack was made as a result of a suggestion of one of my customers who writes reviews. All code is mine, so only I am to blame for any bugs…
Support Please use this form to report all issues, questions and comments.