2e:null 2f:["$","title",null,{"children":"Hello, Slide-Element | Andrew Wooldridge | Observable"}] 34:[] 32:{"id":"9610090824c50a31","slug":"hello-slide-element","title":"Hello, Slide-Element","thumbnail":"b6e61ec36d856eb5bda5052f1e88c325dd2dc567106f38e0bad008f0d9ce2e53","access_level":"public","create_time":"$D2021-07-23T15:34:13.082Z","update_time":"$D2021-07-23T15:47:22.982Z","view_time":null,"first_public_time":"$D2021-07-23T15:47:50.866Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":26,"publish_version":26,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[{"id":"c1e928e9953a44fb","reply_to_id":null,"content":"I tend to use the lesser known details/summary native HTML for this use case. https://observablehq.com/@fil/html-details","create_time":"$D2021-07-26T10:53:59.558Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"160b231feccacaa7","slug":"random-bits","title":"Random Bits","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"type":"notebook","body":{"title":"Hello, Slide-Element","cells":[{"id":0,"value":"# Hello, Slide-Element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"A small library to allow you to slide elements open and closed. \n\nReference: https://alexmacarthur.github.io/slide-element/\n\nCode from: https://codepen.io/alexmacarthur/pen/VwpEgom","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"se = require(\"slide-element\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`

\n\n

\n \n \n

\n These contents will toggle. For most use cases, this is probably the method you'll use in the wild. Clicking the button again will cause the box to open and closed based on its current state (obviously).\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"// toggle() example\ndocument.getElementById('toggleButton').addEventListener('click', (e) => {\n se.toggle(document.getElementById('toggleExample')).then(isOpen => {\n e.target.innerText = `It's ${isOpen ? 'open' : 'closed'}!`;\n });\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"