I made collapsible html <ul>
list using <details>
<summary>
.
However, if I try to reference to bookmark it does not open automatically. In below example, I would love to call url page with #Q0A0
to see page automatically open Q0
node and Q0A
subnode to make Q0A0
visible:
e.g.: list.html#Q0A0
<!DOCTYPE html>
<html lang="en">
<head>
<title>Details/summary opened with anchor via javascript</title>
</head>
<body>
<ul>
<li><details id="Q0"><summary>Q0</summary>
<ul>
<li><details id="Q0A"><summary>Q0A</summary>
<ul>
<li><details id="Q0A0"><summary>Q0A0</summary>Answer to Q0A0</details></li>
<li><details id="Q0A1"><summary>Q0A1</summary>Answer to Q0A1</details></li>
<li><details id="Q0A2"><summary>Q0A2</summary>Answer to Q0A2</details></li>
</ul>
</details>
</li>
<li><details id="Q0B"><summary>Q0B</summary>Answer to Q0B</details></li>
<li><details id="Q0C"><summary>Q0C</summary>Answer to Q0C</details></li>
</ul>
</details>
</li>
<li><details id="Q1"><summary>Q1</summary>
<ul>
<li><details id="Q1A"><summary>Q1A</summary>Answer to Q1A</details></li>
<li><details id="Q1B"><summary>Q1A</summary>Answer to Q1B</details></li>
<li><details id="Q1C"><summary>Q1A</summary>Answer to Q1C</details></li>
</ul>
</details>
</li>
</ul>
</body>
</html>