Hello! I’m relatively new to TiddlyWiki, and I am currently using it to write character bios. However, I want to hide some details that could drastically affect the plot of my stories. I was wondering if there was a way to select a portion of a tiddler’s body text and hide it from the viewer unless they clicked on it? Ideally, the hidden text would look similar to spoiler text on platforms like Discord or TVTropes where the space the spoiler text takes up is still visible, but I am open to alternatives! Thanks!
Hi @Thistle487, welcome to the TiddlyWiki community! 
There are many ways to achieve results similar to Discord spoiler text.
Give this a try:
First, when editing the tiddler’s content, enclose the desired text in a “class wrapper” like this:
This is some text. @@.spoiler this text is hidden for now.@@ This is some more text
Then, create a tiddler (e.g., “MySpoilerStyles”), tagged with $:/tags/Stylesheet, containing:
.spoiler { background:<<colour foreground>>; }
.spoiler:active { background:revert; }
The first CSS rule above causes the background of the spoiler text to match the text color, which effectively hides the spoiler. Then, the second CSS rule above restores the normal background of the spoiler text when you click AND HOLD over the spoiler text so that it is no longer hidden. Note the use of :active… this CSS pseudo-class applies only while the mouse button is held down. As soon as you release the mouse button, the spoiler text will be hidden again.
Also note that this won’t hide any link text contained within the spoiler. To ensure that link text is also hidden, add these two extra CSS rules to the stylesheet tiddler:
.spoiler a { color:#333333 !important; }
.spoiler:active a { color:revert !important; }
The !important is needed so that the link color change is applied to both internal (tc-tiddlylink) and external (tc-tiddlylink-external) flavors of link elements.
A similar effect can be achieved by using :hover instead of :active, which just requires the mouse pointer to be over the spoiler text, rather than needing to click. As soon as you move the mouse away from the spoiler text, it is hidden again.
I realize that this is not the SAME as the Discord effect, which allows the spoiler text to remain visible after clicking, but perhaps this is sufficient for your needs.
Let me know how it goes…
enjoy,
-e
2 Likes