what's the standard way people are doing CSS collapsible text or spoiler-covered clickable text on here? I have a thought about a long-post where I'd have to warn for spoilers about a book, and it's too long to just use the "read more" option here.
ive been basically doing three modes depending on how I want the content™ obscured... only the third one is probably what you're asking for but hey, an excuse to overthink shit!
The short version is, depending on context, and in order of complexity:
- just using the CW button
- placing behind a manually placed cut
- using the HTML details tag (pretty simple HTML, no fancy CSS required)
Details behind the cut
use a CW
the first is just to use the CW thing if it's a thing that obviously requires it or if the entire post is just spoilers front to back, because it's simple and obvious and just works and is a pretty good fit for "you need to opt into seeing this entire post" ... and obviously this is the answer for topics which actually do require a real CW
use a cut
the second is to post something like a short general introduction "hook" to get people interested, a short description of what's behind the cut, and place a manual cut with --- so that section is opt-in. it's simple and can be done entirely in markdown
use the details tag
the third is the most flexible but requires a small bit of html - the details tag. It gives you a collapsed document block with a short summary that can be clicked to expand, and is useful when you want most of your post to be visible, with select sections collapsed because they contain spoilers, an excruciating level of specificity most people wouldn't care about, etc etc
click this to see bonus words
chirp
chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp chirp
chirp chirp chirp chirp chirp chirp chirp chirp
The entire code for this block is the following
<details>
<summary>click this to see bonus words</summary>
## chirp
chirp chirp chirp chirp chirp chirp chirp chirp
chirp chirp chirp chirp chirp chirp chirp chirp
chirp chirp chirp chirp chirp chirp chirp chirp
chirp chirp chirp chirp chirp chirp chirp chirp
chirp chirp chirp chirp chirp chirp chirp chirp
chirp chirp chirp chirp chirp chirp chirp chirp
*chirp chirp chirp chirp chirp chirp chirp chirp*
</details>
basically you just wrap the entire thing in <details> tags, write the short summary you want to appear in <summary> tags, and stick the rest in the details tag body
markdown even seems to work inside them, provided you leave a newline after the summary tags (otherwise the next line gets glued to the end of the summary tag like and markdown that has to go at the start of a line, like headings, won't work...)
