Collapse Output

Quarto Extension

Author

Installation

quarto add mcanouil/quarto-collapse-output

This will install the extension under the _extensions subdirectory.

If you’re using version control, you will want to check in this directory.

Usage

Add the filter to your document’s YAML header:

filters:
  - collapse-output

Configuration Options

You can configure the extension using the extensions.collapse-output section:

extensions:
  collapse-output:
    method: lua  # or "javascript" (default: "lua")

Method Option

lua (default): Processes the collapse using Lua at build time. The output is wrapped in HTML <details> elements during rendering.
javascript: Delegates the collapse to JavaScript at runtime. The JavaScript file will be loaded and handles the collapse dynamically.

Using `output-fold` Code Cell Option

To collapse output for a specific code cell, use the output-fold: true code cell option:

```{language}
#| output-fold: true

# Your code here
```

You can also customise the summary text with the output-summary code cell option:

```{language}
#| output-fold: true
#| output-summary: "Click to view results"

# Your code here
```

Examples

Basic Example with Text Output

This example demonstrates collapsing simple text output:

#| output-fold: true
#| output-summary: "Code Output"

```{python}
#| label: code

group = ["Ctl"] * 10 + ["Trt"] * 10
ctl = [4.17, 5.58, 5.18, 6.11, 4.50, 4.61, 5.17, 4.53, 5.33, 5.14]
trt = [4.81, 4.17, 4.41, 3.59, 5.87, 3.83, 6.03, 4.89, 4.32, 4.69]
weight = ctl + trt

# Calculate means
mean_ctl = sum(ctl) / len(ctl)
mean_trt = sum(trt) / len(trt)

# Calculate difference
diff = mean_trt - mean_ctl

print(f"Mean (Ctl): {mean_ctl:.2f}")
print(f"Mean (Trt): {mean_trt:.2f}")
print(f"Difference: {diff:.2f}")
```

Mean (Ctl): 5.03
Mean (Trt): 4.66
Difference: -0.37

Example with Table Output

This example demonstrates collapsing table output:

#| output-fold: true
#| output-summary: "Table"

```{python}
#| label: table

import polars as pl

df = pl.DataFrame({
  "Group": group,
  "Weight": weight
})

df
```

shape: (20, 2)

Group	Weight
str	f64
"Ctl"	4.17
"Ctl"	5.58
"Ctl"	5.18
"Ctl"	6.11
"Ctl"	4.5
…	…
"Trt"	3.83
"Trt"	6.03
"Trt"	4.89
"Trt"	4.32
"Trt"	4.69

Example with Matplotlib Figure

This example demonstrates collapsing a Matplotlib plot:

#| output-fold: true
#| output-summary: "Figure 1"

```{python}
#| label: figure-1

import matplotlib.pyplot as plt

plt.boxplot([ctl, trt], tick_labels=["Ctl", "Trt"])
plt
```

Example with Plotnine Figure

This example demonstrates collapsing a plotnine/ggplot figure:

#| output-fold: true
#| output-summary: "Figure 2"

```{python}
#| label: figure-2

from plotnine import ggplot, aes, geom_boxplot, labs
import polars as pl

df = pl.DataFrame({
  "Group": group,
  "Weight": weight
})

(
  ggplot(df.to_pandas()) +
    aes(x="Group", y="Weight") +
    geom_boxplot() +
    labs(title="Boxplot of Weight by Group")
)
```

Use Cases

The collapse output extension is particularly useful for:

Long outputs: Hide lengthy console output, tables, or plots by default.
Tutorial documents: Keep code visible whilst hiding output until needed.
Reports: Show results on demand without cluttering the main document.
Interactive exploration: Allow readers to selectively view outputs of interest.

Notes

Note

The output-fold code cell option only works with HTML output formats.
When using the Lua method (default), the collapse is applied at build time.
When using the JavaScript method, the collapse happens in the browser.
The default summary text is “Code Output” if output-summary is not specified.
Both output-fold and output-summary are code cell options (use #| prefix).