Add useAccordion hook

Author: carolstran

src/assets/css/_css/docs.less

@@ -162,6 +162,75 @@
     }
   }
 
+  .faq-content {
+    h3 {
+      font-size: 16px;
+      padding: 40px 0;
+      // box-shadow: 0px -1px 0px #242424;
+      margin: 0;
+      user-select: none;
+      cursor: pointer;
+      position: relative;
+  
+      &.open:after {
+        transform: rotate(-90deg);
+      }
+  
+      &:after {
+        content: '';
+        height: 14px;
+        width: 9px;
+        background-image: url('data:image/svg+xml,%3Csvg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6.67512e-07 7.00014L9 1.03507e-06L9 14L6.67512e-07 7.00014Z" fill="%23343434"/%3E%3C/svg%3E%0A');
+        position: absolute;
+        transition: transform 200ms ease;
+        right: 0;
+  
+        @media screen and (max-width: 768px) {
+          display: none;
+        }
+      }
+
+      a {
+        display: none
+      }
+    }
+
+    ul {
+      max-height: 0;
+      opacity: 0;
+      transition: all 200ms ease;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 23px;
+      color: #999999;
+      margin-bottom: 0;
+  
+      &.show {
+        max-height: 800px;
+        opacity: 1;
+        margin-bottom: 1.0875rem;
+      }
+    }
+    p {
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 23px;
+      color: #999999;
+      max-height: 0;
+      opacity: 0;
+      transition: all 200ms ease;
+      margin: 0;
+  
+      &.show {
+        opacity: 1;
+        max-height: 400px;
+        margin-bottom: 1.0875rem;
+      }
+    }
+  }
+
   .faq-questions::before {
     content: "\A";
     white-space: pre;

src/pages/faq.tsx

@@ -1,9 +1,70 @@
-import React from "react"
+import React, { useEffect } from "react"
 import Layout from "../components/Layout"
 import FAQSection from "../components/FAQSection"
 import { graphql } from "gatsby"
 
+export const useAccordion = () => {
+  const toggleChildrenClass = (element: HTMLElement) => {
+    console.log(nextUntil(element, 'h3'))
+    Array.from(nextUntil(element, 'h3')).map(p =>
+      p.classList.toggle('show')
+    );
+  };
+
+  var nextUntil = function (elem: HTMLElement, selector: string) {
+
+    // Setup siblings array
+    var siblings = [];
+  
+    // Get the next sibling element
+    let nextElement = elem.nextElementSibling;
+  
+    // As long as a sibling exists
+    while (nextElement) {
+  
+      // If we've reached our match, bail
+      if (nextElement.matches(selector)) break;
+  
+      // Otherwise, push it to the siblings array
+      siblings.push(nextElement);
+  
+      // Get the next sibling element
+      nextElement = nextElement.nextElementSibling;
+  
+    }
+  
+    return siblings;
+  
+  };
+
+  useEffect(() => {
+    const hash = location.hash ? location.hash.split('#')[1] : '';
+
+    if (hash) {
+      const parent = document && document.getElementById(hash);
+
+      document.getElementById(hash).classList.toggle('open');
+      toggleChildrenClass(parent);
+    }
+
+    const toggleClasses = (e: Event) => {
+      if (e.target.localName !== 'h3') return;
+      history.replaceState({}, '', '#' + e.target.getElementsByTagName('a')[0].id);
+      history.scrollRestoration = 'manual';
+
+      e.target.classList.toggle('open');
+      toggleChildrenClass(e.target);
+    };
+
+    document.addEventListener('click', toggleClasses);
+
+    return () => document.removeEventListener('click', toggleClasses);
+  }, []);
+};
+
 export default ({ pageContext, data }: any) => {
+  useAccordion()
+
   const sections = data.allMarkdownRemark.edges
     .map((e: any) => e.node)
     .sort((a: any, b: any) => {