Spoiler tags

Vayday · March 27

Hello, sorry to bother you. I wanted to know if there was any way to hide parts of an article as spoilers, and if you can how to do this. I know there are a couple of already pretty old threads on the matter, but the last one I could find is 10 year old and I dont think anyone involved could still be active around those parts, plus things may be different now.

If there is a way to implement this in a page, could someone explain it to me like I'm stupid ? I'm not very good at coding.

Thank you for your time.

Abersade · March 30

There are a few ways to do it.

Easiest in my opinion is to use CSS, which consists of three parts: the spoiler text itself, the CSS that hides the spoiler text, and the CSS that reveals the spoiler text on hover.

Basically, those parts looks like this:

Spoiler text section (includes HTML to declare the spoiler class inside of a span):

<span class="spoiler">Here be ye spoiler.</span>

CSS that hides the spoiler:

/* Spoiler Hide Effect */

.spoiler {

background-color: transparent;

color: transparent;

cursor: pointer;

transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;}

CSS that reveals the spoiler on hover:

/* Spoiler Reveal Effect */

.spoiler:hover {color: black;}

Abersade · March 30

That CSS code assumes a white background. Depending on your site you may need to change the colors involved. The HTML and spoiler text go inline, the CSS bits go in the CSS area in the Settings > Advanced portion of your site.

Abersade · March 30

The CSS bits only need to be added once to your site, the inline HTML needs to be done every time you want a spoiler.

Abersade · March 30

Not sure why I chose white, actually. I updated the CSS code so work on any background that isn't dark. If your background is dark, change the reveal CSS to a lighter color than black.

Abersade · March 30

I also added this code to my CSS help hub: https://abersade-testbed.obsidianportal.com/wikis/css-help-main-hub

Vayday · April 18

Hello, sorry for the delay, life has not given me a lot of free time up until now. Thank you so much for your reply. If I understand correctly, including spoiler tag necessitate an ascendant membership, as Custom CSS is a prenium features. While I can probably afford to pay so I can insert them into the code I wonder if they will get reverted if I go back to a free account.

Abersade · April 18

So, I don't know if this requires Ascendant (the Plans page indicates maybe it won't work), but you could try doing inline CSS instead. That does mean that the text will need to be highlighted to reveal the spoiler instead of it being revealed on :hover though.

To try it, paste this bit in to you site:


This is a bit of unspoilered text. &lt;span style=" background-color: transparent; color: transparent; cursor: help;"&gt; This text is hidden. &lt;/span&gt;

vadercomplex · April 21

Any code that you complete using Ascendant should not disappear once it's been downgraded. Please let me know if you need any further assistance! @Vayday

Vayday · April 28

@Abersade : This works perfectly ! Thank you !

@vadercomplex : Thank you for clarifying !

Vayday · April 30

@Abersade : Actually, I just realised, the spoilered text show up fine on PC when you highlight it, but not on mobile. Is there maybe a way to fix this?

Abersade · April 30

Works fine when I highlight it from my phone, assuming you mean the inline css.

Abersade · April 30

So, on that note, is it the inline CSS? Does it impact all mobile browsing or just a specific phone?

Vayday · April 30

Weird, it doesnt show up for me. Here's the link to my wiki https://horai.obsidianportal.com/

Abersade · May 1

Abersade · May 1

So, inline for sure. Still though, it works on my phone. Mine is a Pixel 9 Pro XL. What that likely means is that it's either OS based or resolution based, most likely resolution. If you haven't already, have your players test it out.

The reason that this is an issue is that phones don't really do reveals unless it's specifically triggered (unlike desktop which handles :hover as expected). Your screenshot shows some weirdness there too though, as if the CSS is being overridden or something. Since mobile typically relies on @media selectors that's possible, especially if your resolution is lower.

To know what's happening I need to be able to either reproduce the problem, or to have you trigger an inspect from mobile. That... isn't super easy. Look up remote debugging on mobile, or inspecting on mobile, to see how that would work for your phone and browser. Once we know what is happening in the CSS we can go from there to troubleshoot further.

Othwerwise, maybe OP support can help?

Vayday · May 1

I ran some test with the members of my community and I think it is definitively a browser problem. Both me and another member use Firefox for Mobile and it doesnt appear at all.

BTW, do you think there's a way to make the spoilered text a bit more obvious, just to make sure people actually see there's spoilered text and dont think it's just blank ?

Vayday · May 1

We ran some more test and, with some help from a member of my community we came up with this :


&lt;details &gt;
    &lt;summary style="border-radius: 8px; color: white; background-color: black; padding: 8px 16px; width: fit-content;"&gt;spoilers :&lt;/summary&gt;
    &lt;span style="display: inline;"&gt;texte&lt;/span&gt;
&lt;/details&gt;

You can see it in details here : https://horai.obsidianportal.com/wikis/test

Abersade · May 1

"https://horai.obsidianportal.com/wikis/test"

Huh, you essentially made an accordion drop down. Neat. That's a totally valid way to do it too, I was basing the inline CSS I provided on the first bit that revealed just on :hover. Didn't think to try a click to reveal like that. Looks good.

If it's a browser problem, that would typically be a change being overridden. In this case I don't think that's the issue, as the inline CSS works, it's hiding the text. The reveal is done on highlight, which the browser appears to be interpreting as no different than just viewing the page. That's the unexpected behavior.

Then again, maybe it's not so unexpected...

Abersade · May 1

After looking into this further, I think you and your group are likely on the best track for mobile compatibility. There is probably some CSS trickery that we could find that would work, but at a certain point the method becomes too convoluted. The juice isn't worth the squeeze, that sort of thing. If you want the presence of your spoilers to be obvious, without the risk of accidental reveals, and to be compatible with just about every browser coded in the last 25 years, the details tag appears to be your best bet unless you go Ascendant and we can make more complicated CSS that reacts conditionally.

Vayday · May 5

Thank you for your help !

Spoiler tags

Comments

September 2026
City of Shadows

Howdy, Stranger!

Discussions

Categories

Forum

Information

Spoiler tags

Comments

September 2026 City of Shadows

Howdy, Stranger!

Discussions

Categories

Forum

Information

September 2026
City of Shadows