Actions

Work Header

Workskin for showing and hiding spoilers

Work Text:

Here how it works:

Hover or Click to show Spoiler Darth Vader is Luke Skywalker's father. I know, it's really shocking. Also it's brand new information.

It works in the author's note as well!! (but not in summaries)

This works on mobile as well by clicking on the text.

The Workskin CSS code is this:

#workskin .spoilerbutton {
  display: inline;
}

#workskin .spoiler {
  display: none;
}

#workskin .spoilerbutton:active .spoiler,
#workskin .spoilerbutton:hover .spoiler {
  display: inline;
}

And you use it in your text (or author's note by using it like this:

<p class="spoilerbutton"> Hover or Click to show Spoiler <span class="spoiler">this is a spoiler</span> </p>

Basically you have an element that's called 'spoilerbutton' and the important part is that the element called 'spoiler' is inside 'spoilerbutton'. or it just won't work.

How to use

  • Go to your dashboard on Ao3 and then on the right you'll find "Skins". Click on there
  • On the left there's a button "Create site Skin"
  • Set the Type as 'Workskin', this is important!
  • Add a title for you to remember it (always consider that skin titles needs to be unique across the site, so maybe add your username at the end? spoilers-electricalice? idk)
  • Now Scroll and copy paste the Workskin CSS code I pasted before in the part labelled "CSS" 
    #workskin .spoilerbutton {
  display: inline;
}

#workskin .spoiler {
  display: none;
}

#workskin .spoilerbutton:active .spoiler,
#workskin .spoilerbutton:hover .spoiler {
  display: inline;
}
  • Now press submit!
  • Now you need to add it to your work! Create a new one or edit one you already have.
  • In the section "Select Work Skin" select the skin you just saved
  • Use this code to add the text itself. it works both in the author's notes and in the text (but remember to add it in the HTML, not in the rich text editor! <p class="spoilerbutton"> Hover or Click to show Spoiler <span class="spoiler">this is a spoiler</span> </p>