Work Text:
Example:
Gonna post a spoiler here
Click here to get spoiled
Oh noes! Big surprises!
And if you want to put a spoiler inside a spoiler....
You can totally do that
Click the arrow again to re-hide.
(You don't have to click exactly on the arrow; the text next to it works too.)
How To
Here's what the basic code (for just one spoiler) looks like:
<details>
<summary>Click here to get spoiled</summary>
Oh noes! Big surprises!
</details>
To nest a second spoiler inside the first one, as above, all of that code is repeated inside the details tags. In this example I put it after the plain text of the first spoiler ('Oh noes!'), so the code ends with two </details> tags. You can play around with the order as long as the entire block of code for the nested spoiler comes after the first </summary> tag and the whole thing ends with at least one </details> tag.
Notes
This feature does work in comments. However, unless the author has turned off comment emails, the full text of the comment (though not the code) will show up un-obscured in the author's inbox. Don't use this thinking it hides comments from the author.
epub format does not support this, so for fic downloaded to e-readers, spoiler text will appear un-obscured.
For this to work in the body of a fic, you must be using the HTML setting at the top right of the Work Text field. If you normally use Rich Text, you can switch over to html just to enter the code, save it as draft, then go back to editing in rich text.
Ao3 likes to 'help' so if you switch back and forth between HTML and Rich Text or do multiple previews, you will see some additions to the code you wrote, and at some point it may change <details> to <details open="open">, which will make the text visible by default with the option to click the arrow and hide it (still working, just the reverse of what you probably want). If that happens, switch to HTML mode and find that line, delete 'open="open"' and anything else that may have been added, so it just says <details>, then save the draft again.
General FAQ on Ao3 and HTML and an excellent guide to Ao3 HTML by CodenameCarrot.
Update: Folks have asked how I wrote out the code in this post
If you work in HTML mode, Ao3's text input parses anything inside paired angle brackets as a code tag and makes it invisible. If it's not a valid markup tag, it straight up deletes it. This is frustrating when you're trying to demo code.
To make paired angle brackets show up, use the html character codes:
< for <
> for >
Here's a list of html character codes. Named and numbered versions both work.
Another good-to-know character code is the non-breaking space. It's handy for when you want
<- multiple spaces at the beginning of a line, or -> in the middle a line to show up.