Conditional content div ignores additional attributes (id, extra classes) on same div

[cboct]

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

When a fenced div uses a conditional content class such as .content-visible or .content-hidden, other attributes on that same div appear to be dropped or ignored in output. For example, custom IDs and additional classes are not preserved as expected.

Steps to reproduce

Create a div with some attribute (e.g., a class) and a .content-visible class with some condition:

:::{.slide-in-handout .content-visible when-meta="make.slide"}
## Div text

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity. Delay rapid joy share allow age manor six. Went why far saw many knew. Exquisite excellent son gentleman acuteness her. Do is voice total power mr ye might round still.
:::

Actual behavior

In the rendered HTML, the div tag (which is actually turned into a <section>) does not contain the .slide-in-handout class.

<section>

Expected behavior

Since conditional content is technically a div, using Pandoc's div syntax, I would have expected that other attributes are preserved in the HTML output.

<section class="slide-in-handout">

Your environment

VSCode on Windows 11

Quarto check output

Quarto 1.9.36
[>] Checking environment information...
      Quarto cache location: C:\Users\cberger\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.8.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.4.5: OK
      Typst version 0.14.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.9.36
      Path: C:\Program Files\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)

[>] Checking LaTeX....................OK
      Tex:  (not detected)

[>] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
      Source: Windows Registry

[>] Checking basic markdown render....OK

[>] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking Julia installation...

[cboct]

Workaround:

:::: {.content-visible when-meta="make.slide"}

::: {.slide-in-handout}
## Div text

Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity. Delay rapid joy share allow age manor six. Went why far saw many knew. Exquisite excellent son gentleman acuteness her. Do is voice total power mr ye might round still.
:::

::::

[mcanouil]

Please provide a complete reproducible example, not a standalone snippet, see example below. (Edit your original post to include YAML header/context)

The conditional content feature is not a div attribute/class. It's a special markup to indicate if the content should or not be included in the final document.
I don't think it was ever intended to be mixed with other components such as cross-references, layout, etc. as it would make the processing chain highly complicated.
What you call a workaround is the actual documented usage, maybe the examples should show a nested component example.

To me this is a documentation issue.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[cboct]

The conditional content feature is not a div attribute/class. It's a special markup to indicate if the content should or not be included in the final document.

Understood. In this case, it might be a documentation bug, since the guide says:

You can accomplish this by creating divs, spans and code blocks with the .content-visible and .content-hidden classes.

This made me conclude that .content-visible and .content-hidden are technically just normal classes in normal divs.

But then, it would be quite unfortunate that this special functionality shares its syntax with standard divs, spans, and code blocks.

This being said, the code block example does include an extra attribute .python in the conditional content markup:

```{.python .content-visible when-format="html"}
# code shown only in HTML
2+2
```

Not sure if this is also special markup or a doc bug.

[mcanouil]

``` is not a div, it's a fenced div, a CodeBlock in Pandoc AST parlance.

This made me conclude that .content-visible and .content-hidden are technically just normal classes in normal divs.

It could be confusing, but if those were regular classes, then they would be ignored in non HTML formats.

Unfortunately, the story for each specific Quarto and Pandoc features based on the AST from Pandoc and extended by Quarto is not that simple. ID, attributes, classes, in the sense of Pandoc divs, spans, and fenced divs can be used for many thing but in a specific order. The resolution order is the complicated part as each processing transform the content.
In general, it's recommended to nest divs about "structure" and "style", rather than combine them into one div. That's the current limitation.

Conditional content divs are not needed in the final documents, so they are always removed to keep the structure simple and not end up with <div><div><div><div><div><div><div>... for no reasons.
CodeBlock are processed slightly differently than Divs, because the class defines the language of the CodeBlock, so it's important to keep it, but note that in in the end the structure is the same (no extra divs).

---

In your example, you might want to move the enclosing div class to slide class, unless adding an extra <div> is on purpose in your slide (the effect is not exactly the same).

## slide title {.slide-in-handout}

[mcanouil]

To summarise, conditional content +

• spans -> preserve attributes and the span
• code blocks -> preserve attributes and the code block
• divs -> drop attributes and the div

[cboct]

if those were regular classes

Well, obviously, they aren't, as they have to be processed at the Markdown-to-X step already and don't appear in the output.

My naive idea was that the processing queue could process the .content-visible/hidden "class" and produce a div that contains the rest of the attributes (if the output is HTML).

I'll use the workaround of adding an extra div with the desired class.

## slide title {.slide-in-handout}

I didn't know this also works, thanks for the hint! (Edit: What I mean is that an attribute applied to a slide heading extends to the whole slide)

Edit 2: Somehow, the div becomes duplicated. Now I see it in the <h2> and in the <section>...

[cscheid]

In Quarto 2 we won't fix this. Instead, we'll have diagnostics that stop you from doing that. In other words, please consider this as a "syntax error" in your document. The bug is that Quarto 1 is currently incapable of letting you know about it.

[cboct]

I agree to consider this a pure doc issue/improvement. Technically, the separation of standard divs and specialized functionality makes sense.