seems better

labapp/app/templates/base.html

@@ -18,48 +18,19 @@
     <link href="/static/custom.css" rel="stylesheet">
 
     <script>
-      document.addEventListener('DOMContentLoaded', function() {
-          document.querySelectorAll('.btn-toggle').forEach(button => {
-              button.addEventListener('click', function() {
-                  setTimeout(() => { // Wait for the collapse animation to complete
-                      let states = [];
-                      document.querySelectorAll('.collapse').forEach((collapse, index) => {
-                          states.push({
-                              id: collapse.id,
-                              open: collapse.classList.contains('show')
-                          });
-                      });
-                      setCookie('accordionStates', JSON.stringify(states), 1);
-                  }, 350);
-              });
-          });
-          const states = getCookie('accordionStates');
-          if (states) {
-              const accordionStates = JSON.parse(states);
-              accordionStates.forEach(state => {
-                  let element = document.getElementById(state.id);
-                  if (element) {
-                      let bsCollapse = new bootstrap.Collapse(element, {
-                          toggle: false // Disable automatic toggling
-                      });
-                      state.open ? bsCollapse.show() : bsCollapse.hide();
-                  }
-              });
-          }
-      });
       function setCookie(name, value, days) {
           var expires = "";
           if (days) {
               var date = new Date();
               date.setTime(date.getTime() + (days*24*60*60*1000));
               expires = "; expires=" + date.toUTCString();
           }
-          document.cookie = name + "=" + (value || "")  + expires + "; path=/";
+          document.cookie = name + "=" + (value || "") + expires + "; path=/";
       }
       function getCookie(name) {
           var nameEQ = name + "=";
           var ca = document.cookie.split(';');
-          for(var i=0;i < ca.length;i++) {
+          for(var i=0; i < ca.length; i++) {
               var c = ca[i];
               while (c.charAt(0)==' ') c = c.substring(1,c.length);
               if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
@@ -86,8 +57,44 @@
             resultDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
         }
       }
-      </script>
+      document.addEventListener('DOMContentLoaded', function() {
+          function updateCollapsibleStates() {
+              setTimeout(() => {
+                  let states = [];
+                  document.querySelectorAll('.collapse').forEach((collapse) => {
+                      states.push({
+                          id: collapse.id,
+                          open: collapse.classList.contains('show')
+                      });
+                  });
+                  setCookie('navStates', JSON.stringify(states), 1);
+              }, 500); // Consider verifying if 350ms is adequate to wait for the animation to finish.
+          }
 
+          // Event listeners for toggle buttons
+          document.querySelectorAll('.btn-toggle').forEach(button => {
+              button.addEventListener('click', function() {
+                  updateCollapsibleStates();
+              });
+          });
+          // Initialize states from cookie
+          const states = getCookie('navStates');
+          if (states) {
+              const accordionStates = JSON.parse(states);
+              accordionStates.forEach(state => {
+                  let element = document.getElementById(state.id);
+                  if (element) {
+                      let bsCollapse = new bootstrap.Collapse(element, {
+                          toggle: false
+                      });
+                      state.open ? bsCollapse.show() : bsCollapse.hide();
+                  }
+              });
+          }
+          // Ensure states are captured initially
+          updateCollapsibleStates();
+      });
+      </script>
 </head>
 <body>
 <div class="container-fluid">
@@ -191,8 +198,8 @@
                     setInterval(fetchAndUpdateStatus, 20000);
                 });
 
-                  </script>
-                  <div class="status-box align-items-center bg-light p-2 text-center">
+                </script>
+                <div class="status-box align-items-center bg-light p-2 text-center">
                     <p><strong id="siteName">Loading...</strong></p>
                     <img id="statusImage" src="/static/unknown.png" alt="Status" style="width:50px; height:auto;">
                 </div>