diff --git a/code/html/custom.css b/code/html/custom.css
index 1e0aabb1..99b66429 100644
--- a/code/html/custom.css
+++ b/code/html/custom.css
@@ -168,7 +168,7 @@ label {
 .emon-expected-volt,
 .emon-expected-curr,
 .emon-expected-ene {
-    display: none;
+    content-visibility: hidden;
 }
 
 /* -----------------------------------------------------------------------------
diff --git a/code/html/custom.js b/code/html/custom.js
index 7dfe0046..546ba657 100644
--- a/code/html/custom.js
+++ b/code/html/custom.js
@@ -1861,10 +1861,7 @@ function initMagnitudesExpected(id) {
     const [expected, result] = template.querySelectorAll("input");
 
     const info = emonRatioInfo(id);
-    const expectedClass = `emon-expected-${info.prefix}`;
-
     const root = template.children[0];
-    root.classList.add(`show-${expectedClass}`);
 
     expected.name += `${info.key}`;
     expected.id = expected.name;
@@ -1877,14 +1874,11 @@ function initMagnitudesExpected(id) {
     label.textContent = info.name;
     label.htmlFor = expected.id;
 
-    const container = document.getElementById("emon-expected")
-    const hint_shown = container.querySelector(`.show-${expectedClass}`);
-    if (hint_shown === null) {
-        const hint = template.querySelector(`.${expectedClass}`);
-        hint.style.display = "block";
-    }
+    styleInject([
+        styleVisible(`.emon-expected-${info.prefix}`, true)
+    ]);
 
-    mergeTemplate(container, template);
+    mergeTemplate(document.getElementById("emon-expected"), template);
 }
 
 function emonCalculateRatios() {