Shouldn't collapsible admonitions also contain admonition class name like their classic counterparts ?

[Thiti517]

I was wondering why my JavaScript script that opens all collapsible admonitions on a page when the user asks for it didn't work. Then I realized that collapsible admonitions do not have the admonition class name like their classic counterparts. This leads to my question (in title).

Here is the HTML generated for each type of admonitions:

Classic admonition:

<div class="admonition note">
    <p class="admonition-title">Note</p>
    <p>Lorem ipsum...</p>
</div>

Collapsible admonition:

<details class="note">
    <summary>Note</summary>
    <p>Lorem ipsum...</p>
</details>

I understand that collapsible admonitions use the <details> tag to achieve the collapsible feature, but shouldn't they also include the admonition class name for consistency?

[kamilkrzyskow]

Hi @Thiti517,
admonitions and details, are generated by separate Markdown Extensions:

• https://python-markdown.github.io/extensions/admonition/
• https://facelessuser.github.io/pymdown-extensions/extensions/details/

Which generate output separately. Also looking at other SSGs like Docosaurus, there is also a clear separation between admonitions and details, as details is an HTML tag.

MkDocs and with it Material for MkDocs uses these dependencies, and has to work with the given output. Hence, the theme defines two selectors for the CSS:

.md-typeset .note > .admonition-title, .md-typeset .note > summary {
  background-color: #448aff1a;
}

and the same should be done with JavaScript. though for opening the details with a class you can select details[class] or maybe details:has([class]) 🤔

If you really need the addition of the admonition class, you could modify the pymdownx.details extension to match your needs.
Or use 2 classes ???+ note admonition in your Markdown.

[Thiti517]

Oh... I didn't see these two elements as different since they are both labeled "admonition" above their code blocks in the documentation:

• https://squidfunk.github.io/mkdocs-material/reference/admonitions/#usage
• https://squidfunk.github.io/mkdocs-material/reference/admonitions/#collapsible-blocks

I will indeed use the provided selector to access all <details> elements and open them. However, I think it should be done like this, since each type of admonition/details can have a different class than note, including custom ones.

.md-typeset details:has(summary)

Thanks a lot for the more robust selector and the insight!