Material MKDocs - collapsible text without admonition

[gmoskowitzQF]

I am using the following code to create a drop-down list:

<details><summary>Maintenance</summary>
Exceptions<br>
Items<br>
Vendor Items<br>
Vendors<br>
</details>

So when you click "Maintenance" it drops down a list of the items below it (Exceptions, Items, etc.).
When I preview this in VS Code it looks like a small black arrow next to "Maintenance" and the list appears under it when you click it. This is exactly what I want.

Maintenance

Exceptions
Items
Vendor Items
Vendors

However when I build the site it shows up as an admonition.

How do I create the drop down list without the admonition?

[squidfunk]

Currently not possible. Material for MkDocs applies the style to details. We might scope it to details[class], but honestly, it's the first time we hear about this request and changing this might break overrides downstream, as we're increasing the specificity of the selector. For this reason, we're currently not considering this change.

[gmoskowitzQF]

Is there any other way to achieve what I want - to get a collapsible line of text without it being an admonition?

[facelessuser]

I assume you could just add a bit of styling to target non-admonition style details

details:not([class]) {
  all:  revert !important;
}
details:not([class]) > summary {
  all:  revert !important;
}

[squidfunk]

Nice! Haven't thought of revert. Great solution!

[gmoskowitzQF]

@facelessuser

Can you please show me where to put your "details:not([class])" text in my existing code? I'm not sure where to put it. Thanks.

This my current code:

<details><summary>Maintenance</summary>
Exceptions<br>
Items<br>
Vendor Items<br>
Vendors<br>
</details>

[kamilkrzyskow]

@gmoskowitzQF
You'd have to follow these instructions to add additional CSS:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css

Add the CSS above to the extra.css file.

[gmoskowitzQF]

Thank you! That worked. Because this is done in a css file I assume it causes all my drop-downs to appear this way. In other words, if I wanted to use the default admonition style with the blue box, could I do that for one or two instances?

[kamilkrzyskow]

Every admonition is styled with a CSS class:

• https://squidfunk.github.io/mkdocs-material/reference/admonitions/#supported-types

So details:not([class]) should scope the changes only to the <details> without a class="note" attribute.

You could also go the other way around and style it with another class like this <details class="simple-details"> and instead of details:not([class]) use details.simple-details, however I have not tested this other approach.

[gmoskowitzQF]

Thank you again! The method you described above is working, so now if I want a drop down without the admonition, I just add the class name to the details tag.

However I now have a new problem. I want the items in my drop down to be hyperlinks to different topics. But markdown is not recognizing the hyperlink format (BTW this is all new to me so if I'm not describing it correctly my apologies).

For example, my link to the How To document works outside of the drop-down, but inside the drop down it doesn't work.

Can you not have a hyperlink inside a drop down?

[kamilkrzyskow]

If you search Markdown and HTML it's the first result in the docs:

• https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/?q=markdown+html
• https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#markdown-in-html

You need to enable it under the extensions:

markdown_extensions:
  - md_in_html

and later for each parent tag of your Markdown content add the markdown attribute at the end, so in your case:
<details class="simple-details" markdown> as the <summary> tag doesn't have any Markdown inside.

[gmoskowitzQF]

Cannot thank you enough @kamilkrzyskow !!