How to make “spoiler” text in github wiki pages?

Question

I\'m trying to make text which is either invisible until moused over, or, has a \"show\" / \"hide\" button, or some other thing, so that it is not visible

Answer 1

GFM supports a subset of HTML. For now, you can wrap your question in a <summary> and your answer in any standard HTML tag like <p> and wrap the whole thing in the <details> tag.

So if you do this

<details> 
  <summary>Q1: What is the best Language in the World? </summary>
   A1: JavaScript 
</details>

You get this -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

Browser support is an Issue.

The thing with GitHUB wiki is that it allows you write text in other formats like AsciiDoc, RST etc. Probabaly there's solution in those too. These are 2 formats that are far more feature rich than Markdown.

Answer 2

Building on Gaurav's answer and this GH issue here's a way to use advanced formatting inside the <details> tag on GitHub:

Note: original answer from 2016 required <p>, since 2017 that requirement is an empty line after </summary> (i.e. before expanded contents). Somewhere along the line leading up to 2019, markdown in <summary> is not working any more either. You can see it's quite flaky as it's a hack/workaround, not a supported feature/use case. Also note that issue/PR comments support different formatting than Wikis (e.g. 2020 April underline in summary only works on Wiki, not on issues).

<details>
  <summary>stuff with *mark* **down** in `summary` doesn't work any more, use HTML <i>italics</i> and <b>bold</b> instead in <code>&lt;summary&gt;</code> (<i>click to expand</i>)</summary>
  <!-- have to be followed by an empty line! -->

## *formatted* **heading** with [a](link)
```java
code block
```

  <details>
    <summary><u>nested</u> <b>stuff</b> (<i>click to expand</i>)</summary>
    <!-- have to be followed by an empty line! -->

A bit more than normal indentation is necessary to get the nesting correct,
 1. list
 1. with
    1. nested
    1. items
        ```java
        // including code
        ```
    1. blocks
 1. and continued non-nested

  </details>
</details>

Currently it renders as the following with the expected parts expandable and collapsible:

---

Initial state

---

Click on summary

---

Click on nested summary

Answer 3

The html element <details> and <summary> can do it, have a look:

http://caniuse.com/#search=details

Support is poor for Firefox & Edge, but there may be some pollyfills...

Answer 4

The documentation for GitHub Flavored Markdown makes no mention of spoilers, so I suspect it's not supported. It's definitely not part of the original Markdown spec.

Answer 5

A different solution from the details / summary tags, but also using native html is to use a span with a title. I was doing something like this recently in org mode.

Answer 6

If editing the CSS is an option for you, you can simply use

[](#spoiler "Spoiler Filled Text")

and then use (pure) CSS to give the correct appearance.

a[href="#spoiler"] {
  text-decoration: none !important;
  cursor: default;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #FFF8DC;
  border-left: 2px solid #ffeb8e;
  display: inline-block;
}
a[href="#spoiler"]::after {
  content: attr(title);
  color: #FFF8DC;
  padding: 0 0.5em;
}
a[href="#spoiler"]:hover::after,
a[href="#spoiler"]:active::after {
  cursor: auto;
  color: black;
  transition: color .5s ease-in-out;
}

<p>
  <a href="#spoiler" title="Spoiler Filled Text"></a>
</p>

(Vaguely inspired from this code)