追記
初版: 2016年10月21日
追記: 2018年10月17日
現在でも閲覧されることがあるようなので、古い記事ですが使い方について追記します。
下記本文では
「<details>には空行を含めてはいけないためMarkdownが利用できない」
としていますが、現在ではMarkdwonが利用出来る方法があり、紹介もされ広まっています。
冗長に書き直すよりQiitaのチートシートの引用が明確なので、そちらを参照してください。
Markdown記法 チートシート#Details - 折りたたみ - Qiita
折りたたんだ部分で Markdown を使いたい場合は、折りたたまれる部分全体を
<div>で囲ってください。（\` は実際は \ を含みません。また<div>とコードブロックの間には空白行が一つ以上必要です。）<details><summary>サンプルコード</summary><div> \```rb puts 'Hello, World' \``` </div></details>
サンプルコード
puts 'Hello, World'
新機能の使い方調査
details,summary要素に対応し、投稿内で指定箇所を折りたためるようになりました - Qiita Blog
で何を折りたためるか調査。
まとめ
-
<details>には空行を含めてはいけない
- それに伴い空行必須なor変換結果で空行ができるMarkdownが利用出来ない
(コードブロック、引用、リスト、チェックボックスそしてテーブル)
- それに伴い空行必須なor変換結果で空行ができるMarkdownが利用出来ない
- スライドモードではサマリーしか確認できない
記事内のスライドはこの事の確認のためだけです
あくまで文章を記述しましょう。
紹介サンプルのスライド動作
どんどん共有しましょう
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
記述
<details open>
<summary>どんどん共有しましょう</summary>
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
</details>
スライド内では開けませんし、閉じた状態で表示されます。
open属性によりデフォルトは変わるそうですが、Firefox 49では属性の影響はない模様。
コード形式
どんどん共有しましょう
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
記述
<details>
<summary>`どんどん共有しましょう`</summary>
```
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
```
</details>
コードブロックを有効にすると、details扱いにならない。
コード形式2
どんどん共有しましょう
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
記述
<details>
<summary>`どんどん共有しましょう`</summary>
```
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
```
</details>
コードブロックを引っ付ければ、details扱いになるが、コードブロックの要件を満たさなくなる。
コード形式3
どんどん共有しましょう
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
記述
<details>
<summary>`どんどん共有しましょう`</summary>
<pre>
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
<pre>
</details>
マークダウンは改行必須なものの、直接タグを打てば大丈夫です。
ただ、ハイライトは難しいでしょう。
引用
どんどん共有しましょう
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
記述
<details>
<summary>どんどん共有しましょう</summary>
>プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
</details>
こちらは<blockquote>の前に空の<p>要素が生成されるせいか、含まれません。
<blockquote>で囲むだけなので、手打ちでも良いでしょう。
どんどん共有しましょう
プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。
<details>
<summary>`どんどん共有しましょう`</summary>
<blockquote>プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。</blockquote>
</details>
見出し
どんどん共有しましょう
プログラミングに関することをどんどん投稿して、
知識を記録、共有しましょう。
記述
<details>
<summary>どんどん共有しましょう</summary>
# プログラミングに関することをどんどん投稿して、
## 知識を記録、共有しましょう。
</details>
<details>の外に飛び出します。しかし使うシーンもないでしょう。
装飾
どんどん共有しましょう
プログラミングに関することをどんどん投稿して、
知識を記録、共有しましょう。
プログラミングに関することをどんどん投稿して、
知識を記録、共有しましょう。
記述
<details>
<summary>どんどん共有しましょう</summary>
*プログラミングに関することをどんどん投稿して、*
**知識を記録、共有しましょう。**
_プログラミングに関することをどんどん投稿して、_
~~知識を記録、共有しましょう。~~
</details>
問題なし。
リンク
記述
<details>
<summary>どんどん共有しましょう</summary>
[プログラミングに関することをどんどん投稿して、](http://qiita.com)
</details>
問題なし。
その他
リストやチェックボックス、テーブルも改行が必要なので不可です。