Merge pull request #68 from zevorn/fix/serial-expand-save-restore

fix: save serial panel height before expand, restore on collapse

Author: zevorn

website/index.html

@@ -1424,11 +1424,13 @@ <h2 class="section-title reveal" data-en="Join the Community" data-zh="加入社
     }
 })();
 
-/* Lock serial panel height after layout settles to prevent content growth */
+/* Lock serial panel height to prevent content growth */
+var serialPanelSavedHeight = 0;
 window.addEventListener('load', function() {
     var sp = document.querySelector('.serial-panel');
-    if (sp && !sp.classList.contains('expanded')) {
-        sp.style.height = sp.offsetHeight + 'px';
+    if (sp) {
+        serialPanelSavedHeight = sp.offsetHeight;
+        sp.style.height = serialPanelSavedHeight + 'px';
     }
 });
 
@@ -1763,15 +1765,18 @@ <h2 class="section-title reveal" data-en="Join the Community" data-zh="加入社
 function serialExpand() {
     var panel = document.querySelector('.serial-panel');
     var btn = document.getElementById('serial-expand-btn');
-    var wasExpanded = panel.classList.contains('expanded');
-    panel.style.height = '';
-    panel.classList.toggle('expanded');
-    btn.classList.toggle('active', !wasExpanded);
-    if (wasExpanded) {
-        /* Collapsing: wait for layout reflow then lock height */
-        requestAnimationFrame(function() {
-            panel.style.height = panel.offsetHeight + 'px';
-        });
+    var isExpanded = panel.classList.contains('expanded');
+    if (!isExpanded) {
+        /* About to expand: save current height */
+        serialPanelSavedHeight = panel.offsetHeight;
+        panel.style.height = '';
+        panel.classList.add('expanded');
+        btn.classList.add('active');
+    } else {
+        /* Collapse: restore saved height */
+        panel.classList.remove('expanded');
+        btn.classList.remove('active');
+        panel.style.height = serialPanelSavedHeight + 'px';
     }
 }
 </script>