7.12 Use the <details> disclosure element

As mentioned in Section 7.4, we can fold source code chunks via the option code_folding: hide in the html_document format. Currently it is not possible to fold output blocks, but we can use some JavaScript tricks to make output foldable, too. This can be useful especially when the output is relatively long but not very important. We can fold it initially, and, if the reader is interested, they can unfold it to view the content. Figure 7.5 shows an example: you may click on the “Details” button to unfold the output.

Wrap text output in the details element.Wrap text output in the details element.

FIGURE 7.5: Wrap text output in the details element.

If you are viewing the HTML version of this book, you can actually see it in action below. If you are reading the PDF or printed version, such an interaction (clicking the “Details” button) is certainly not possible.

  1. 1:100
  1. ##   [1]   1   2   3   4   5   6   7   8   9  10  11  12
  2. ##  [13]  13  14  15  16  17  18  19  20  21  22  23  24
  3. ##  [25]  25  26  27  28  29  30  31  32  33  34  35  36
  4. ##  [37]  37  38  39  40  41  42  43  44  45  46  47  48
  5. ##  [49]  49  50  51  52  53  54  55  56  57  58  59  60
  6. ##  [61]  61  62  63  64  65  66  67  68  69  70  71  72
  7. ##  [73]  73  74  75  76  77  78  79  80  81  82  83  84
  8. ##  [85]  85  86  87  88  89  90  91  92  93  94  95  96
  9. ##  [97]  97  98  99 100

Below is the full source Rmd document that includes the JavaScript code to find output blocks, and wrap them into the <details> tags.

  1. ---
  2. title: Use the `<details>` disclosure element
  3. output: html_document
  4. ---
  6. We show text output inside the `<details>` tags in this
  7. example. We used JavaScript to wrap text output blocks
  8. in `<details></details>`. The JavaScript code needs to
  9. be executed at the end of this document, so it is placed
  10. at the end. Below is a testing code chunk:
  12. ```{r}
  13. 1:100
  14. ```
  16. The actual JavaScript code is below.
  18. ```{js, echo=FALSE}
  19. (function() {
  20.   var codes = document.querySelectorAll('pre:not([class])');
  21.   var code, i, d, s, p;
  22.   for (i = 0; i < codes.length; i++) {
  23.     code = codes[i];
  24.     p = code.parentNode;
  25.     d = document.createElement('details');
  26.     s = document.createElement('summary');
  27.     s.innerText = 'Details';
  28.     // <details><summary>Details</summary></details>
  29.     d.appendChild(s);
  30.     // move the code into <details>
  31.     p.replaceChild(d, code);
  32.     d.appendChild(code);
  33.   }
  34. })();
  35. ```

You may try to adapt the JavaScript code above to your own need. The key is to find out the elements to be wrapped into <details>:

  1. document.querySelectorAll('pre:not([class])');

The CSS selector pre:not([class]) means all <pre> elements without the class attribute. You can also select other types of elements. For more about CSS selectors, see https://www.w3schools.com/css/css_selectors.asp. For more about the HTML tags <details> and <summary>, see https://www.w3schools.com/tags/tag_details.asp.