Change record sheet visibility with JavaScript instead of CSS

since the CSS way doesn't work on my version of Firefox

index.js

@@ -282,16 +282,11 @@ const FIRING_ARC_SIZE = {
       }
 
 let prevVb = localStorage.getItem('viewBox');
-let recVis = localStorage.getItem('recordsVisibility');
 
 if (prevVb) {
   svg.setAttributeNS(null, 'viewBox', prevVb);
 }
 
-if (recVis == 'false') {
-  recordSheetVisibility.checked = false;
-}
-
 let info = document.getElementById('status');
 
 Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
@@ -1110,7 +1105,15 @@ svg.addEventListener('pointerdown', e => {
 });
 
 recordSheetVisibility.addEventListener('input', e => {
-  localStorage.setItem('recordsVisibility', recordSheetVisibility.checked);
+  let divs = document.querySelectorAll('#content div');
+
+  divs.forEach(d => {
+    if (recordSheetVisibility.checked) {
+      d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
+    } else {
+      d.style.display = 'none';
+    }
+  });
 });
 
 document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => {

style.css

@@ -68,23 +68,11 @@ div#content {
   line-height: 1.5em;
 }
 
-#content > div {
-  display: none;
-}
-
 #content input[type="checkbox"].visible {
   position: absolute;
   right: 0;
 }
 
-#content:has(input[type="checkbox"].visible:checked) > div {
-  display: block;
-}
-
-#content:has(input[type="checkbox"].visible:checked) div#record-sheet {
-  display: flex;
-}
-
 #record-sheet {
   /* max-height: 100%; */
   overflow-y: auto;