How do I use this spoiler ?

Question

Hello everyone,

I want to integrate this spoiler solution in my story,

But unfortunately when i run the story and check the box, the spoiler doesn't reveal.

Is there something I missed ?

Thanks in advance.

Answer 1

You will need to modify two things to get that spoiler solution to work correctly in Harlowe 2.0.1

1. Escape the line-break at the end of text following the input element.

<input type="checkbox" class="trigger" /> Buka/Tutup Spoiler\
<div class="spoiler">....</div>

... notice the backslash character at the end of the first line of text.
You need to do this because the CSS selector (input.trigger:checked + .spoiler) that handles the showing of the 'spoiler' classed div element's content expects that div element to be the next element directly after the input element but the line-break at the end of the first line of text is converted into a br element which would generated a HTML structure like the following if you don't escape it:

<input type="checkbox" class="trigger" data-raw=""> Buka/Tutup Spoiler
<br>
<div class="spoiler" data-raw="">......</div>

 

2. Change either the background colour or the foreground (Text) colour of the 'spoiler' classed div element:
You need to do this because Harlowe 2.0.1's default foreground colour is white, so you will end up with White text on a White background, (which most people find hard to read *smile*)

Comments

Thanks a lot, the problem came from the escaping !