Archive of Our Own

This is the firstsecond option!

The workskin is:

#workskin details.choice1[open] ~ .work .option1A {
  display: none;
}

#workskin details.choice1[open] ~ .work .option1B {
  display: inline;
}

#workskin details.choice1:not([open]) ~ .work .option1A {
  display: inline;
}

#workskin details.choice1:not([open]) ~ .work .option1B {
  display: none;
}
  

EDITED: the original used the :open pseudo-selector, which didn't work on webkit/safari for some reason. I've replaced this checking the attribute [open] instead, and it works! Use this instead

and the html consists of a <details class="choice1"> element, the entire fic wrapped inside of <div class="work"> and the relevant section written as <span class="option1A">first</span><span class="option1B">second</span>

Is there a better way of doing this? probably.

Using css selectors like (untested, may cause performance issues on longer fics) ".work:has(details.choice1:open) .option1A" could allow things in the middle of a fic which affect elements before it. It could be a good "if you scroll back up the fic is different oooh spooky" effect, though closing the details would just make it revert to normal. Be responsible!

This can be extended to support any number of binary choices, by copying it over and incrementing the numbers in "choice1" and "option1A/B". I would recommend giving them proper names for better organization tho.

You could have all options hidden by default and multiple dropdowns which you ask the reader to only pick one, which would let you have have more than 2 choices per option, badly. A "default" class could also be there, which is hidden if any detail elements are opened.

If i think of other neat uses of this I'll make more examples as chapters or something.