Fix initial bugs with accordion

Author: carolstran

src/components/FAQSection/index.tsx

@@ -1,32 +1,20 @@
 import React from "react"
-import { Link } from "gatsby"
 import Marked from "../Marked"
-import { toSlug } from '../../utils/slug'
 
 interface Props {
   title: string
   permalink: string
-  questions: string
   rawMarkdownBody: string
   pageContext: any
 }
 
 const FAQSection = ({
   title,
-  questions,
   rawMarkdownBody,
   pageContext
 }: Props) => (
   <section className="inner-content">
     <h2>{title}</h2>
-    {questions
-        .split(',')
-        .map(question => (
-            <Link className="faq-questions" key={question} to={`#${toSlug( question )}`}>
-                {question}
-            </Link>
-        ))
-    }
     <Marked pageContext={pageContext}>{rawMarkdownBody}</Marked>
   </section>
 )

src/pages/faq.tsx

@@ -4,14 +4,14 @@ import FAQSection from "../components/FAQSection"
 import { graphql } from "gatsby"
 
 export const useAccordion = () => {
-  const toggleChildrenClass = (element: HTMLElement) => {
+  const toggleChildrenClass = (element: React.ReactNode) => {
     console.log(nextUntil(element, 'h3'))
     Array.from(nextUntil(element, 'h3')).map(p =>
       p.classList.toggle('show')
     );
   };
 
-  var nextUntil = function (elem: HTMLElement, selector: string) {
+  var nextUntil = function (elem: any, selector: string) {
 
     // Setup siblings array
     var siblings = [];
@@ -41,13 +41,16 @@ export const useAccordion = () => {
     const hash = location.hash ? location.hash.split('#')[1] : '';
 
     if (hash) {
-      const parent = document && document.getElementById(hash);
+      const anchor = document && document.getElementById(hash)
+      const heading: any = anchor && anchor.parentNode;
 
-      document.getElementById(hash).classList.toggle('open');
-      toggleChildrenClass(parent);
+      if (heading) {
+        heading.classList.toggle('open');
+        toggleChildrenClass(heading);
+      }
     }
 
-    const toggleClasses = (e: Event) => {
+    const toggleClasses = (e: any) => {
       if (e.target.localName !== 'h3') return;
       history.replaceState({}, '', '#' + e.target.getElementsByTagName('a')[0].id);
       history.scrollRestoration = 'manual';
@@ -72,10 +75,8 @@ export default ({ pageContext, data }: any) => {
       const bPosition = b.frontmatter.position
       if (aPosition < bPosition) {
         return -1
-      } else if (aPosition > bPosition) {
-        return 1
       }
-      return 0
+      return 1
     })
 
   return (
@@ -88,7 +89,7 @@ export default ({ pageContext, data }: any) => {
             {sections.map(
               (
                 {
-                  frontmatter: { title, permalink, questions },
+                  frontmatter: { title, permalink },
                   rawMarkdownBody,
                 }: any,
               i
@@ -97,7 +98,6 @@ export default ({ pageContext, data }: any) => {
                 key={i}
                 title={title}
                 permalink={permalink}
-                questions={questions}
                 rawMarkdownBody={rawMarkdownBody}
                 pageContext={pageContext}
               />