Make proofs collapsible in HTML

[adityam]

I am trying to port by hand maintained course website to quarto. To keep the main discussion short, I like to use <details> <summary> tags to keep the proofs hidden. See this page for an example.

Is it possible to do this in quarto; either by using a custom .scss file or using a lua filter?

[mcanouil]

You could use collapsible callout to include your proof bellow or inside the theorem, see https://quarto.org/docs/authoring/cross-references.html#theorems-and-proofs and https://quarto.org/docs/authoring/callouts.html.

Here an example:

See the Quarto document.

---
title: "Demo Quarto"
format: html
---

## Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis semper nisl. Nulla facilisi. Donec auctor, nisl eget aliquam tincidunt, nunc nisl aliquam nisl, eget aliquam nunc nisl eget nunc. Nu [...]


::: {#thm-line}

## Line

The equation of any straight line, called a linear equation, can be written as:

$$
y = mx + b
$$

::::{.callout-note collapse="true"}
## Proofs

Some proofs are given here.
::::

:::

See @thm-line.

Screen.Recording.2023-04-22.at.11.19.19.mov

[adityam]

Thanks! Works perfectly

[ute]

I have just (three weeks late) released an extension: custom-numbered-blocks where you can define an environment "Proof" in the yaml, and then use it as a class for fenced divs. It renders html as <details><summary>...
You can also number theorems, propositions, etc jointly. Maybe it helps for more complicated cases :-)

(shameless advertisement :-))