html document with collapsible toc

[MarcoPortmann]

Description

I would like to create an html document with a collapsible TOC. When the page is loaded, the TOC shall be displayed. But it should be possible to reduce it to the heading or an icon at the top left.

I have something like this

or this

in mind. Is something like that possible in Quarto? How would I have to expand the following code?

---
title: "Quarto Document"
format:
  html:
    toc: true
    toc-depth: 3
    toc-location: left
---


# Title
## Subtitle

# Title 2
## Subtitle 2

I have searched the documentation and forums extensively. I see similar functionality for book or website projects. However, I would like to avoid to turn this into a book or website project.

[cderv]

We do collapse navigation on article layout like here https://quarto.org/docs/authoring/article-layout.html

I don't remember if this can be activated otherwise. I think it is only activated like this when no room in the margins available.

I don't see any config for toc to activate this on any HTML toc: https://quarto.org/docs/reference/formats/html.html#table-of-contents

[mcanouil]

I think it is only activated like this when no room in the margins available.

One could use that as a workaround.

[MarcoPortmann]

The best solution I've found so far is to integrate the qmd document into a minimalist website project and tweak the sidebar for mobile devices using custom CSS.

project:
  type: website

website:
  favicon: "favicon.ico"
  title: ""
  navbar:
    logo: "departement_logo.svg"
    logo-href: "https://www.something.com/"
  sidebar:
    open-graph:
    site-name: Title

format:
  html:
    theme:
      - custom.scss
    toc: true