Force checkboxes to initial value

src/code-collapse/index.html

@@ -6,12 +6,13 @@
     <p>Here's some content before</p>
 
     <div class="code-collapse-wrapper">
-      <input type="checkbox" id="collapse" />
+      <input type="checkbox" id="collapse" checked />
       <label class="open-tag" for="collapse" aria-label="tag">&lt;tag</label>
       <div class="collapse-content">This is the inner content</div>
       <label for="collapse" class="close-tag">&lt;/tag&gt;</label>
     </div>
 
     <p>Text below the collapse, which should move out the way</p>
+    <script type="module" src="index.js"></script>
   </body>
 </html>

src/code-collapse/index.js

@@ -0,0 +1,10 @@
+const collapse = document.getElementById("collapse");
+
+document.addEventListener("DOMContentLoaded", function () {
+  // Force checkboxes to their initial value
+  for (const checkbox of this.document.querySelectorAll(
+    "input[type=checkbox",
+  )) {
+    checkbox.checked = checkbox.defaultChecked;
+  }
+});