7.12 折りたたみ要素 <details> を使う
7.4節で言及したように, html_document フォーマットの code_folding: hide オプションでソースコードチャンクを折りたたむことができます. 現在は出力ブロックを折りたたむことはできませんが, JavaScript の小ワザが使えれば出力を折りたたみできます. これは出力が比較的長く, しかしさほど重要でないときに役に立つでしょう. 初期状態で折りたたみ, 読者が興味を持てば内容を見るために展開することができます. 図7.5はその例です. 「詳細」ボタンをクリックして出力を展開できるでしょう.
図 7.5: details 要素でテキスト出力を囲む
あなたがご覧になっているのが本書の HTML バージョンなら, 以下のチャンクで実際に動くのを見ることができます. PDF または印刷版を読んでいるのなら, このような対話的機能 (「詳細」ボタンを押すこと) はもちろん不可能です.
## [1] 1 2 3 4 5 6 7 8 9 10 11 12
## [13] 13 14 15 16 17 18 19 20 21 22 23 24
## [25] 25 26 27 28 29 30 31 32 33 34 35 36
## [37] 37 38 39 40 41 42 43 44 45 46 47 48
## [49] 49 50 51 52 53 54 55 56 57 58 59 60
## [61] 61 62 63 64 65 66 67 68 69 70 71 72
## [73] 73 74 75 76 77 78 79 80 81 82 83 84
## [85] 85 86 87 88 89 90 91 92 93 94 95 96
## [97] 97 98 99 100以下の Rmd 文書は, 出力ブロックを検出しそれを <details> タグで囲む JavaScript コードを読み込ませた, 完全なソースです.
---
title: 折りたたみ要素 `<details>` を使う
output: html_document
---
この例ではテキスト出力を `<details>` タグ内に表示します.
JavaScript でテキスト出力ブロックを `<details></details>` で囲みます.
Javascript コードはこの文書の末尾で実行する必要があるため,
最後に配置します. 以下はテスト用のコードチャンクです.
```{r}
1:100
```
実際の JavaScript コードは以下になります.
```{js, echo=FALSE}
(function() {
var codes = document.querySelectorAll('pre:not([class])');
var code, i, d, s, p;
for (i = 0; i < codes.length; i++) {
code = codes[i];
p = code.parentNode;
d = document.createElement('details');
s = document.createElement('summary');
s.innerText = '詳細';
// <details><summary>詳細</summary></details>
d.appendChild(s);
// コードを <details> 内に移動
p.replaceChild(d, code);
d.appendChild(code);
}
})();
```上記の JavaScript コードを自分で適用することもできます. ポイントは要素を <details> で囲むということです.
document.querySelectorAll('pre:not([class])');CSS セレクタの pre:not([class]) は class 属性のない全ての <pre> 要素を意味します. 他の要素のタイプを選択することもできます. CSS セレクタについてより知りたいなら, https://www.w3schools.com/css/css_selectors.asp を見てください. HTML タグ <details> と <summary> をより知りたいなら, https://www.w3schools.com/tags/tag_details.asp を見てください.