Nested Containers

Toggle works inside tabsets, callouts, and more

Toggle buttons work regardless of where your code cells live. Tabsets, callouts, columns, <details> elements: the extension finds your code and attaches buttons correctly.

Configuration

This page uses document-wide toggle:

extensions:
  toggle:
    output-toggle: true

Tabsets

cat("R code inside a tabset\n")
R code inside a tabset
summary(1:10)
   Min. 1st Qu.  Median    Mean 3rd Qu.    Max. 
   1.00    3.25    5.50    5.50    7.75   10.00 
print("Python code inside a tabset")
Python code inside a tabset
import math
print(f"Pi = {math.pi:.6f}")
Pi = 3.141593
::: {.panel-tabset}

#### R

```{r}
cat("R code inside a tabset\n")
summary(1:10)
```

#### Python

```{python}
print("Python code inside a tabset")
import math
print(f"Pi = {math.pi:.6f}")
```

:::

Callouts

NoteCode in a Note 
cat("This code lives inside a callout\n")
This code lives inside a callout
WarningWarning with Code 
print("Toggle works in warnings too")
Toggle works in warnings too

Click the callout to expand, then toggle the output:

cat("Hidden inside a collapsed callout\n")
Hidden inside a collapsed callout
::: {.callout-note appearance="simple"}
## Code in a Note

```{r}
cat("This code lives inside a callout\n")
```
:::

::: {.callout-warning appearance="simple"}
## Warning with Code

```{python}
print("Toggle works in warnings too")
```
:::

::: {.callout-tip appearance="simple" collapse="true"}
## Collapsed Callout

Click the callout to expand, then toggle the output:

```{r}
cat("Hidden inside a collapsed callout\n")
```
:::

Details Elements

Click to expand 
cat("Code nested inside a <details> element\n")
Code nested inside a <details> element
Already expanded 
print("This details element starts open")
This details element starts open
<details>
<summary>Click to expand</summary>

```{r}
cat("Code nested inside a <details> element\n")
```

</details>

<details open>
<summary>Already expanded</summary>

```{python}
print("This details element starts open")
```

</details>

Columns

Left Column

cat("Left side\n")
Left side

Right Column

print("Right side")
Right side
::: {.columns}

::: {.column width="50%"}
**Left Column**

```{r}
cat("Left side\n")
```
:::

::: {.column width="50%"}
**Right Column**

```{python}
print("Right side")
```
:::

:::

Nested Combinations

A tabset inside a callout inside a div:

NoteDeeply Nested 
cat("Three levels deep\n")
Three levels deep
print("Still works")
Still works
::: {.border .p-3}

::: {.callout-note appearance="simple"}
## Deeply Nested

::: {.panel-tabset}

#### Tab A

```{r}
cat("Three levels deep\n")
```

#### Tab B

```{python}
print("Still works")
```

:::

:::

:::

Summary

Toggle uses ID-based matching between code blocks and outputs. The DOM structure doesn’t matter. Nest your cells inside tabsets, callouts, columns, or any combination. The extension finds them and attaches buttons correctly.