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