Conditional Content

Show different content based on whether the output format is interactive (HTML) or non-interactive (PDF, Word) through the use of special classes .interactive-only and .non-interactive-only.

Demo

For example, you might want to include an interactive widget in HTML output, but provide a static message in PDF/Word.

::: {.details summary="Interactive Demo"}

::: {.interactive-only}
<button onclick="alert('Hello!')">Click Me</button>
:::

::: {.non-interactive-only}
*Button not available in this format. See the online version.*
:::

:::

This gives:

Interactive Demo

This button only appears in HTML output.

You can see that in HTML output, the button is interactive, while in PDF/Word found under “Other Formats”, a placeholder message is shown instead.