Quarto: Hide toc (table of content) with the Hmisc library

Question

In rmd bookdown files there is the possibility to hide the toc in html output automatically when not used.

But this behavior does not work with quarto qmd -> html output. Is there something similar available?

Rmd file:

---
title: "My Title"
author: "My Name"
output:
  bookdown::html_document2:
    keep_tex: true
    toc: true
    toc_float: true
    toc_depth: 5
---

```{r setup, include=FALSE}
require(Hmisc)
```

`r Hmisc::hidingTOC(hidden=TRUE,levels=0)`



# Header 1

## Sub header 1

# Header 2

## Sub header 2

Hmisc::hidingTOC() is here the function for auto hiding.

Example how it looks like when expanded:

Insinuate

So you do not want to use toc when the output format is html but show the toc when output format is anything else, say, pdf ? – Insensate

It is an automatic behavior, when you go with the mouse on the toc. You can open and close the menu. The question is only html related. – Insinuate

Maybe it is a bug or not implemented feature in quarto. – Insinuate

The hidingTOC() function is documented to work on Rmd files, and doesn't mention Quarto. I think you'll need to update it. What it does is to insert some Javascript and CSS into the document; you need to figure out what has changed, and make it Quarto compatible. The source is pretty well documented, so this should be doable. – Stonecutter

Right, hidingTOC hasn't been updated in some time. If anyone wants to work on it the source code is here. – Sulphuryl

Answer 1

I don't see any mention of quarto support in {Hmisc} documentation so far. But using html, css and javascript you can create similar behavior.

quarto_doc.qmd

---
title: "Table of Contents Button"
format: 
  html:
    toc: true
    include-after-body: 
      file: toc.html
---

# Header 1

## Sub header 1

# Header 2

## Sub header 2

toc.html

<button id="toc-button" onclick="collapseToc()">Contents</button>

<style>

#toc-button {
  border-radius: 10px;
  padding: 5px 10px;
  border: 2px solid dodgerblue;
}

</style>

<script>
  function add_button() {
    let sidebar = document.querySelector("#quarto-margin-sidebar");
    let btn = document.querySelector("#toc-button");
    sidebar.prepend(btn)
  }
  
  function collapseToc() {
    let toc = document.querySelector("#TOC");
    if (toc.style.display === "none") {
      toc.style.display = "block";
    } else {
      toc.style.display = "none";
    }
  }
  
  window.onload = add_button();
</script>

---

---

Insensate

Very nice solution. But the main benefit of the hidden content is, that it takes no space, which is a benefit when you work in an IDE with preview window like Rstudio or VS Code. See the added picture in my question. – Insinuate

You should have included this at first. Now my answer almost got useless :( – Insensate

It can be the base for further improvements. There is obviously actually no support from the Hmisc package. – Insinuate

To be honest in my opinion, I think you should not mark this answer accepted, because it didn't quite solve the problem, just introduced a possibility (May be!) :-) – Insensate