Literal spoiler text as shown in the question is not supported in GitHub Flavored Markdown or the original Markdown implementation.

However Markdown supports inline HTML, and GitHub allows a subset of HTML tags to remain in the rendered output. As described in other answers, <details> works on GitHub.

If that's "spoilery" enough for you, feel free to use it.

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...

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.

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

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)

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.