I would like to adopt this for my character page. Normally the characters that are dead have red frames around their images. I would like that to be hidden until the click on a button. I have had a bit of success but have come across some issues I can't figure out.
Here is the template that I want to apply the css to. I have three tests of the template being used below it on the same page so that you can see the problem.
The first test is just putting the template directly below the button and it mostly works (the area behind the name doesn't change color still)
The second test has the template a few spaces below and it doesn't work at all.
The third test has the template in a table, which is how I am using it on the Characters page and it doesn't work.
Here is the css that I am using for this. I know that this is not a very traditional use of css and am still very new to it. I would appreciate any help you can give.
I tried asking last year on another wikia so I could add an interactive graph and it was ignored. I don't know if they were busy or didn't think it was appropriate, but I just linked to the graph on a regular webpage instead.
Or I could just make two versions of the page, one with spoilers and one without... Its not a pretty solution, but it would work.
I figured out part of it. I needed to change the "+" selector to a "~" selector. Now both test 1 & 2 are mostly working. Number 3 is still not working. I think it might have something to do with a <div> not working right inside of a table.
Edit:oops. I know to use <nowiki>, I just goofed :P
Edit 2: Oh the irony...
Now I just have to find the right selector to do the same with the template inside the table. This has been a fun challenge. I'm updating this post because someday in the future someone else will be hopelessly searching these forums, looking for something similar.
I figured out the problem is that the "~" symbol is a sibling combiner and when the character boxes are put inside the table, they become descendants of that sibling. I wasn't sure how to fix it though.
I had the question also posted on stackoverflow and found out that two combiners can be combined. Using "~*" does just what I want, it looks at a sibling's descendant.