Enhancing expandable headers

dbt-labs · Oct 15, 2024 · 70c6e52 · 70c6e52
1 parent a46288f
commit 70c6e52
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/website/src/components/collapsible/index.js b/website/src/components/collapsible/index.js
@@ -10,13 +10,16 @@ function Collapsible({children, header, description, expand}) {
   return (
     <>
         <h2 onClick={toggleExpanded}>
+          <React.Fragment>
+            <span style={{ color: expanded ? 'orange' : 'orange' }} aria-hidden="true">
+              { expanded ?  ' ^ '  : ' > ' }
+            </span>
             {header}
-            { expanded ?  ' -'  : ' +' }
+          </React.Fragment>
         </h2>
-        { expanded ? children : <span>{ description ? description : "Click to expand" }</span> }
+        { expanded ? children : <span>{ description ? description : "Click above for details" }</span> }
     </>
   );
 }
 
 export default Collapsible;
-