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
3 Likes
@EricShulman – Can you please provide a link, that stays visible if CSS rules do not use !important.
I did test it at tiddlywiki.com and the following CSS did hide internal and external links just fine.
.spoiler { background:<<colour foreground>>; }
.spoiler:active { background:revert; }
.spoiler a,
.spoiler a:visited { color:<<colour foreground>>; }
.spoiler:active a { color:revert; }
You’ve added .spoiler a:visited to the CSS rules. Without that, visited links have their own color value so they still appear. Your solution is, of course, an improvement since it doesn’t need !important.
-e
hmmm. You are right. If someone did create their own custom styles with a high specificity for links, my CSS may not be sufficient.
May be this is a case where !important is recommended.
@Thistle487 – Welcome! – Just to explain the discussion about !important.
Usually I am in opposition to use it, because it can cause all sort of problems, if used lightly. So I try to avoid it if possible.
But
With your use-case, where you need to make sure, that spoiler-text is hidden, no matter what, it may be valid.
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://TiddlyWiki.com for now.
@@ This is some more text
-e
2 Likes
Thank you both so much! This has been very useful. I’m not sure if this is possible, but the CSS provided by @EricShulman makes the links in the spoiler text a different color than the links in the rest of the tiddler body; is there a way to make the colors match? No worries if not; thank you both again!
Try using my the last CSS solution I posted, which does not change the link colors at all:
.spoiler { background:<<colour foreground>>; }
.spoiler * { opacity:0; }
.spoiler:active { background:revert; }
.spoiler:active * { opacity:revert; }
-e
You don’t need anything more than a regular <details> element/widget.
<details><summary>Secrets Inside</summary>
Super secret details!
</details>
Although the original post indicated they were “open to alternatives”, they also specifically requested an effect “similar to spoiler text on platforms like Discord”, which blacks out content until you click on it which replaces the blacked out display with the hidden content.
In contrast, the <details> element produces a very different effect: it initially shows summary content with a leading arrow symbol, and then, when clicked, it expands to show additional hidden content.
-e
Got back to this later than I wanted, but the new CSS @EricShulman provided worked perfectly! It didn’t load properly the first time I tried it, but I think I just needed to reload the wiki.
As for the details widget, I have found a separate use for it in hiding content that I want to give warnings for. Thanks to everyone in the thread for helping me with this!