Spoiler answer

Question

Is there an editor that supports "spoiler" content? Users need to click a button in order to reveal the content which is a part of an answer.

I see such feature in various stackexchange sites.

Or is there a plugin to do so?

Answer 1

I don't know if there is a plugin that provides a "spoiler" feature, but with a markdown editor you can (relatively) easily emulate it. Add a style like this to your stylesheet:

.qa-post-content span.spoiler:not(:hover),
.qa-post-content span.spoiler:not(:hover) * {
  color: #aaaaaa;
  background-color: #aaaaaa;
}

and people can write something like this in the edit box:

Lorem ipsum <span class="spoiler">dolor sit amet</span>, consectetur adipiscing elit.

which will then display the <span> as a grey box until the user hovers the mouse over it.

Comments

Thanks, in stackexchange sites, they use a pair of CSS properties "visibility: hidden;" and "visibility: visible;"

I think I can use a different pair "display:block" and "display:none" as well.

But "hover" is not a good trigger, it won't work in mobile view. Stackexchange sites use some kind of a javascript that changes the class of the spoiler area.

I think maybe I can use a pair HTM5 tags <summary> and <details>, at least I use it in some non-Q2A pages.

---

Perfect answer