28:null 29:["$","title",null,{"children":"Collapsible and Nested List | joesquito | Observable"}] 2f:T428,html` `30:T519,collapsibleListsHtml = html`

Not Collapsible

Node A
- Node A1
  - Node A1.i
    - Leaf A1.i a
    - Leaf A1.i b
  - Leaf A1.ii
- Leaf A2
Node B
- Leaf B1
- Leaf B2

Collapsible

Node 1
- Node 1.1
  - Node 1.1.1
    - Leaf 1.1.1.1
    - Leaf 1.1.1.2
  - Leaf 1.1.2
- Leaf 1.2
Node 2
- Leaf 2.1
- Leaf 2.2

Collapsible

Node A
- Leaf A1
- Node A2
  - Leaf A2.i
  - Leaf A2.ii
  - Leaf A2.iii
  - Leaf A2.iv
Node B
- Leaf B1
- Leaf B2

` 31:[] 2c:{"id":"3d3c6db3f887a3a4","slug":null,"title":"Collapsible and Nested List","thumbnail":"55bbd59861506a4e75e625cbc450c657080979a364ca958857e7f71e2fb9828e","access_level":"public","create_time":"$D2023-03-27T11:40:54.172Z","update_time":"$D2024-03-09T23:16:11.672Z","view_time":null,"first_public_time":"$D2023-03-27T11:40:54.172Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0060d7e6ab876335","login":"joesquito","name":"","avatar_url":"https://avatars-next.observableusercontent.com/da831b9cdea0bbd7b05f416ce528d6c9398e104259fdd1f2458721f21264327e","tier":"starter_2024"},"version":217,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02ab589dd66f3f2f","login":"joesquito","name":"","avatar_url":"https://avatars-next.observableusercontent.com/da831b9cdea0bbd7b05f416ce528d6c9398e104259fdd1f2458721f21264327e","tier":null}],"members":[{"type":"individual","id":"02ab589dd66f3f2f","login":"joesquito","name":"","avatar_url":"https://avatars-next.observableusercontent.com/da831b9cdea0bbd7b05f416ce528d6c9398e104259fdd1f2458721f21264327e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Collapsible and Nested List","cells":[{"id":0,"value":"# Collapsible and Nested List\n","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"{\n\n collapsibleListsHtml\n \n // Get all the list items that have a nested list\n const uls = document.querySelectorAll(\".collapsible li > ul\");\n\n function recurs(el, prevHeight) {\n if (el.classList.contains(\"collapsible\")) {\n return;\n } else if (el.tagName !== \"UL\") {\n recurs(el.parentNode, prevHeight);\n } else {\n const newHeight = el.scrollHeight + prevHeight;\n recurs(el.parentNode, newHeight);\n el.style.maxHeight = newHeight + \"px\"; \n } \n }\n\n uls.forEach((ul) => {\n const li = ul.parentNode;\n \n li.classList.add(\"has-nested\");\n\n ul.style.maxHeight = \"0\";\n\n li.addEventListener(\"click\", function (e) {\n if (e.target !== this) {\n return;\n }\n\n // Prevent the default behavior of clicking on a link\n e.preventDefault();\n\n if (ul.style.maxHeight === \"0px\") {\n li.classList.add(\"open\");\n\n recurs(ul, 0);\n } else {\n ul.style.maxHeight = \"0\";\n li.classList.remove(\"open\");\n }\n });\n });\n}","pinned":false,"hidden":true,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"