I just discovered we can collapse headings in the editor with F2 which is great! I do wish we could do this in the viewer too. In these days of online conferencing and screen sharing it is very useful to be able to show something in a focused way.
EDIT:
I thought of a html/css solution and actually found this workaround: https://github.com/laurent22/joplin/issues/1168#issuecomment-572557778
I also wanted to have whitespace on top of the Markdown which is the same size as the table of contents because otherwise the HTML is pushed much lower for big documents by the toc. The aforementioned workaround fixes this too:
<details><summary>Table of contents</summary>
[toc]
</details>
Note that the empty line above the markdown ([toc] in this case) is necessary for it to render.
If you want to have your details open by default like in the case of sections, you could do:
<details open><summary>Table of contents</summary>
[toc]
</details>
This, of course, is not ideal for long sections because of the trailing </details> tag and because it will require a lot of editing of old notes. I hope a better solution comes along either through CSS or in the renderer itself.