<details> tag missing disclosure triangle

Notebook
1

I’m not sure what changed but for a while now, Jupyter Notebook hasn’t been displaying the details tag correctly in markdown cells.

If I have the following:

<details>
<summary>Dropdown title</summary>
Hidden text.
<\details>

Then I will see the text “Dropdown title” and if I click it, it will expand to show “Hidden text.”, but there’s no disclosure triangle to let the user know that it’s a dropdown.

if I change it like so:

<details>

<summary>Dropdown title</summary>
Hidden text.
<\details>

Then it says “Details” instead of “Dropdown title”, but it correctly shows the triangle.

I’m not sure how to get it to print “Dropdown title” and also show the disclosure triangle.

1 Like
2

I think you should be using </details> as a closing tag, not <\details>. Other than that, it appears to be a common issue in GitHub-flavoured markdown (I saw similar issues on GitHub for ages), and a different but related issues appeared recently in JupyterLab: Markdown details no longer works in 3.x but worked in 2.x · Issue #10171 · jupyterlab/jupyterlab · GitHub. We (as community) need to write a bunch of tests specifically for details tag to prevent this from happening and fix these issues; I don’t think anyone is working on this right now though.

3 Likes
3

Thanks for the typo catch, I was hastily transcribing.

I’ve sought help in other forums and it appears the issue is one of CSS. The disclosure triangle is a list style, and I guess Jupyter’s default CSS styling is changing <summary> to display as a block, which removes list-styling and hence the triangle.

I’ve been told to ensure the <summary> tag is set to display: list-item.

2 Likes