detailsToggle fast follow (#4659)

this pr updates the code i the following sections because the ux was a
little weird if you immediately clicked on the toggle after it expanded:

- `handleToggleClick` flips the current open/close state (!current), and
ensures hover is always active.
- `handleMouseEnter`checks if the content is already open (isOn) before
enabling hover
- `handleMouseLeave` enables so that the content closes only if it's not
already open due to a click.

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'>