2c:null 2d:["$","title",null,{"children":"Hello, Slide-Element | Andrew Wooldridge | Observable"}] 32:[] 30:{"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","bio":"📜JavaScript developer. \n\n🐲RPG fan. \n\n📚Storyteller and 🕹game developer. \n\n👨Father and Husband."},"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,"bio":"📜JavaScript developer. \n\n🐲RPG fan. \n\n📚Storyteller and 🕹game developer. \n\n👨Father and Husband."}],"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":{"titling":"auto","title":"Hello, Slide-Element","cells":[{"id":0,"value":"# Hello, Slide-Element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"se = require(\"slide-element\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"