R Markdown: hide spoiler text (hover over text element)

Is it possible to hide blocks of text within .html files created with R Markdown? The elements of text should be hidden until the user hovers over the text preferentially (or clicks a button). The elements to be hidden do not concern code blocks. Currently I include text within < p> < /p>

It was suggested to hide text blocks by preceding each line with ‘>!’, but R Studio does not recognize this ‘markdown’ approach. It just returns a text block that starts with ‘!’. I prefer this simple ‘hover’ approach though, above Javascript and buttons.

Any suggestions would be welcome. Thanks.

Answer

My suggestion is to use CSS for this task.

The following Rmd file includes some rules to hide the spoiler class elements. You may find other approaches with CSS:

---
output: html_document
---

```{css, echo=FALSE}
.spoiler {
  visibility: hidden;
}

.spoiler::before {
  visibility: visible;
  content: "Spoiler alert! Hover me to see the answer."
}

.spoiler:hover {
  visibility: visible;
}

.spoiler:hover::before {
  display: none;
}
```

You can insert a message in raw `HTML`:
<p class="spoiler">Answer</p>

A better approach is to use bracketed spans:  
[This is another answer]{.spoiler}

Attribution
Source : Link , Question Author : Elyakim , Answer Author : RLesur

Leave a Comment