Spoiler css snippet

[claudioluciano]

I’m by no means an obsidian expert or an css wizard, but i have made an css snippet to make some “spoiler” text.

This code is based on this reddit comment

https://gist.github.com/claudioluciano/1c108c5fe7804d3ff393f27667d84971

Feel free comment a better way

[holroy]

Are you on desktop or mobile? Is hovering an option on your platform?

[claudioluciano]

Desktop

[holroy]

In the thread below a blurring is used:

Meta Post - Common CSS Hacks

I was looking for a CSS solution for spoilers and secrets in my Obsidian notes, tried different options, researched plugins, etc., but nothing satisfied my simplest need to hide bits of text and be able to see them on mouse hover or something, so I came up with my own tiny CSS snippet solution and I’m pretty happy with the result. Basically you use it as a callout with - [#] Secret text goes here... and all you need to do is to keep you mouse cursor in that callout while typing and then when yo…

I wrote a similar version related to anki Q&A’s, see answer below. This could also be adjusted to show/reveal different parts related to what’s hovered.

Changing the style of a paragraph that meets a certain criteria

Here is a little out of the box solution using inline fields from Dataview which should be possible to make compatible with the anki plugin by extending the regex a little. With this markup: [Q:: What two modern notions about architecture do we need to leave behind to understand Egyptian architechture?] [A:: The need for change and innovation, and the need for an appropriate relation between material and form.] [Q:: Which is the first letter of the alphabet?] [A:: A] - [Q:: Can inline fiel…

[huulong]

It works well, thanks!

Although it was disturbing to see the “checkbox” disappear when editing the line and caret was after the - [#] part:

so I changed:

/* Hide the checkbox */
[data-task="#"]>label {
    display: none;
}

with

/* Hide the checkbox */
[data-task="#"]:not(.cm-active)>label {
    display: none;
}

Now it shows a standard checkbox:

not ideal but I’d need to draw a “sharp / spoiler” symbol in CSS to display the ideal symbol, so that’s too much effort right now.

I should probably post this variant on GitHub gist too.

EDIT: DONE