hide multievent elements on page load

Author: mikebarkmin

.changeset/thin-suits-agree.md

@@ -0,0 +1,6 @@
+---
+"@hyperbook/markdown": patch
+"hyperbook": patch
+---
+
+Hide multieventy element on page load to not reveal the solutions.

packages/markdown/assets/directive-multievent/multievent.js

@@ -964,6 +964,8 @@ var multievent = {
     }
 
     SK[clNr].style.display = "block";
+    SK[clNr].style.visibility = "visible";
+    SK[clNr].style.opacity = "1";
 
     // Add event listeners to save state on changes
     var allInputs = SK[clNr].getElementsByTagName("input");

packages/markdown/assets/directive-multievent/style.css

@@ -8,6 +8,7 @@
 }
 
 .directive-multievent {
+  transition: opacity 0.2s ease-in;
 
   .MECheckbox:not(first-child),
   .MERadio:not(first-child) {

packages/markdown/src/remarkDirectiveMultievent.ts

@@ -26,6 +26,7 @@ export default (ctx: HyperbookContext) => () => {
         data.hName = "div";
         data.hProperties = {
           class: "directive-multievent multievent",
+          style: "visibility: hidden; opacity: 0;",
         };
       }
     });

website/en/book/changelog.md

@@ -54,6 +54,13 @@ Add shareable URL builder with sections filter
 - Floating action buttons (TOC, QR code) now use dynamic flexbox positioning
 - Both share and QR dialogs moved outside content area to remain visible when filtering
 
+
+:::
+
+:::tab{title="Fixed :bug:" id="fixed"}
+
+- Multievent is hidden on page load and gets shown when the javascript is loaded, thus not revealing the solutions.
+
 :::
 
 ::::