detailsToggle fast follow

website/snippets/_sl-faqs.md

@@ -44,7 +44,7 @@ If you're using the legacy Semantic Layer, we highly recommend you [upgrade your
 
 </detailsToggle>
 
-<detailsToggle alt_header="How are you storing my data?*">
+<detailsToggle alt_header="How are you storing my data?">
 
 User data passes through the Semantic Layer on its way back from the warehouse. dbt Labs ensures security by authenticating through the customer's data warehouse. Currently, we don't cache data for the long term, but it might temporarily stay in the system for up to 10 minutes, usually less. In the future, we'll introduce a caching feature that allows us to cache data on our infrastructure for up to 24 hours.
 

website/src/components/detailsToggle/index.js

@@ -7,29 +7,29 @@ function detailsToggle({ children, alt_header = null }) {
   const [hoverTimeout, setHoverTimeout] = useState(null);
 
   const handleToggleClick = () => {
-    setOn(false);
-    setHoverActive(isOn); // Toggle hover activation based on current state
-  };
+    setHoverActive(true); // Disable hover when clicked
+    setOn(current => !current); // Toggle the current state
+};
 
-  const handleMouseEnter = () => {
-    if (!hoverActive) return; // Ignore hover if disabled
-    const timeout = setTimeout(() => {
-      setOn(true);
-    }, 500); // 500ms delay
-    setHoverTimeout(timeout);
-  };
+const handleMouseEnter = () => {
+  if (isOn) return; // Ignore hover if already open
+  setHoverActive(true); // Enable hover
+  const timeout = setTimeout(() => {
+      if (hoverActive) setOn(true);
+  }, 500); 
+  setHoverTimeout(timeout);
+};
 
-  const handleMouseLeave = () => {
-    if (hoverActive && !isOn) {
+const handleMouseLeave = () => {
+  if (!isOn) {
       clearTimeout(hoverTimeout);
       setOn(false);
-      // isOn (false); can't be used here but setOn triggers a re-render
-    }
-  };
+  }
+};
 
-  useEffect(() => {
-    return () => clearTimeout(hoverTimeout);
-  }, [hoverTimeout]);
+useEffect(() => {
+  return () => clearTimeout(hoverTimeout);
+}, [hoverTimeout]);
 
   return (
     <div className='detailsToggle'>