fix a minor bug related to collapsible - overflow issue

subspace · Apr 16, 2024 · 62b093a · 62b093a
1 parent 1cda882
commit 62b093a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 28 deletions.
diff --git a/src/components/Collapsible/Collapsible.css b/src/components/Collapsible/Collapsible.css
@@ -23,18 +23,19 @@
     outline-offset: 2px;
   }
 
-  .collapsible-content {
-    max-height: 0;
+  .collapsible .collapsible-content {
     overflow: hidden;
-    transition: max-height 0.5s ease-in-out;
-    background: var(--ifm-background-color); 
-    border-top: none;
-    padding: 0 1rem; 
-  }
-
-  .collapsible-content.open {
-    max-height: 500px; 
-    padding-top: 0.5rem; 
-    padding-bottom: 1rem; 
-  }
+    background: var(--ifm-background-color);
+    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
+    padding: 0;
+    margin: 0; 
+    display: none; 
+}
+
+.collapsible .collapsible-content.open {
+    display: block; 
+    padding: 0.5rem 1rem; 
+    max-height: auto; 
+}
+
 
diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import './Collapsible.css';
 
 export interface CollapsibleProps {
@@ -8,28 +8,16 @@ export interface CollapsibleProps {
 
 const Collapsible: React.FC<CollapsibleProps> = ({ title, children }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const contentRef = useRef<HTMLDivElement>(null);
-    const [maxHeight, setMaxHeight] = useState<string>('0px');
-
-    useEffect(() => {
-        if (isOpen && contentRef.current) {
-            setMaxHeight(`${contentRef.current.scrollHeight}px`);
-        } else {
-            setMaxHeight('0px');
-        }
-    }, [isOpen]);
 
     return (
         <div className="collapsible">
             <button className="collapsible-toggle" onClick={() => setIsOpen(!isOpen)}>
                 {isOpen ? '▼' : '►'} {title}
             </button>
             <div
-                className="collapsible-content"
-                ref={contentRef}
-                style={{ maxHeight: maxHeight }}
+                className={`collapsible-content ${isOpen ? 'open' : ''}`}
             >
-                {children}
+                {isOpen && children} 
             </div>
         </div>
     );