Missing disclosure triangle when using the <summary> tag

user_12701162 0
Viewed 326

I'm having trouble with the <summary> tag. My problem is in Jupyter Notebook but it's reproducible here.

When I have the following in a markdown cell:

<details>
    <summary>Dropdown label</summary>
Hidden text
</details>

The result I get is "Dropdown label". Clicking on the words will expand to show "Hidden text" as expected, the problem is that there's no disclosure triangle to alert the user that it's a dropdown.

If I change it to this:

<details>

    <summary>Dropdown label</summary>
Hidden text
</details>

It shows the disclosure triangle, but it says "Details", and the <summary> is part of the collapsed text.

How can I get it to display both the correct label and the disclosure triangle?

jupyter-notebook markdown html
1 Answers

Normalize.less styles are removing the triangle

It took me a moment to realize. The disclosure triangle is actually a list style. The Normalize css file that site is including, changes <summary> to display as a block, which removes any list styling. Make sure the summary tag is display: list-item and not block.

Complete Code-

<details>
    <summary style="display:list-item">Dropdown label</summary>
Hidden text
</details>
user_73141550
Related