Spoiler Text Plugin

[oeyoews]

I wanted to make a spoiler text plugin before, but I didn’t have any good ideas at the time. Recently, I saw someone mentioned this requirement in the forum. I happened to read some web component codes recently, and suddenly found that web component is a good idea in tiddlywiki. After initially completing this plugin, I found that the writing method is very similar to tiddlywiki widget, so I also wrote a corresponding widget. Then I hope there can be a shortcut to input, so I imitated the example of wikirule and wrote a spoiler wikirule module. Of course, I also wrote a markdown module to support spoiler. I hope it helps you

online demo: https://neotw.vercel.app/#%24%3A%2Fplugins%2Foeyoews%2Fspoiler-text

$__plugins_oeyoews_spoiler-text (1).json (6.9 KB)

[EricShulman]

There’s no need for a widget or a wikirule… you can create “discord-style” (black out) spoilers using just CSS.

Here’s my solution from October 2024:

Any method for creating spoiler text in Tiddlywiki (TiddlyHost specifically)?

Here’s some CSS rules that provides even more complete, generalized coverage: .spoiler { background:<<colour foreground>>; } .spoiler * { opacity:0; } .spoiler:active { background:revert; } .spoiler:active * { opacity:revert; } By using the wildcard * as a descendent selector with opacity:0, it ensures that all kinds of content are hidden. For example, if the spoiler content includes $button widgets: This is some text. @@.spoiler this text HelloThere is <$button>test</$button> hidden https:/…

… and, if you prefer a blur effect rather than a black out effect, you can just use something like this:

.spoiler { filter: blur(0.5em); }
.spoiler:hover { filter: blur(0); }

enjoy,
-e

[oeyoews]

Yes, I have indeed seen this, the only difference is that the text remains visible on click, which is really integral to the spoiler experience