Merge pull request #224 from mendacium-a11y/faq-accoridan

Added accordian to the FAQ page Issue #222
kossiitkgp · Dec 20, 2023 · 0c888c8 · 0c888c8
2 parents 3ecd248 + fe8d30b
commit 0c888c8
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 20 deletions.
diff --git a/src/data/FAQs.ts b/src/data/FAQs.ts
@@ -147,7 +147,7 @@ export const FAQs = [
     ],
   },
   {
-    question: "What to do,if my stats are not being updated?",
+    question: "What to do, if my stats are not being updated?",
     answer: [
       `Stats are only counted once coding period starts. They are updated periodically and it may take a few hours for them to update. If your stats do not update in a day, contact us at <a class='text-primary font-semibold' target='_blank' href='mailto:${KOSS_CONTACT_EMAIL}'>${KOSS_CONTACT_EMAIL}</a>.`,
     ],

diff --git a/src/pages/FAQ.tsx b/src/pages/FAQ.tsx
@@ -4,10 +4,14 @@ import { FAQs } from "../data/FAQs";
 import FooterSection from "../components/FooterSection";
 import { IconContext } from "react-icons";
 import { MdCancel } from "react-icons/md";
+import { FaPlus } from "react-icons/fa";
+import { FaMinus } from "react-icons/fa";
 
 export default function FAQ() {
   const [query, setQuery] = useState("");
 
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
   const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     setQuery(event.target.value);
   };
@@ -20,10 +24,14 @@ export default function FAQ() {
 
   const searchResults = query ? results.map((result) => result.item) : FAQs;
 
+  const toggleAccordion = (index: number) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
   return (
     <>
       <div className="flex flex-col items-center pt-24">
-        <div className="sticky lg:-top-40 md:-top-40 sm:-top-52 max-[640px]:-top-[10rem] max-[540px]:-top-[12rem] max-[500px]:-top-[14rem] max-[300px]:-top-[18rem] flex flex-col items-center bg-[#0a0a19]">
+        <div className="sticky lg:-top-40 md:-top-40 sm:-top-52 max-[640px]:-top-[10rem] max-[540px]:-top-[12rem] max-[500px]:-top-[14rem] max-[300px]:-top-[18rem] flex flex-col items-center bg-[#0a0a19] z-[200]">
           <section className="px-16 py-4 my-8 mx-0">
             <h1 className=" font-display font-bold text-3xl sm:text-5xl mb-8 text-center">
               Frequently Asked Questions
@@ -54,30 +62,54 @@ export default function FAQ() {
         </div>
 
         <div className="flex flex-col items-center max-w-3xl px-4">
-          <ul className="list-none py-2 space-y-12">
+          <div className="py-2 space-y-3">
             {searchResults.map((FAQ, i) => {
               const { question, answer } = FAQ;
               return (
-                <li className="space-y-4" key={`q-${i}`}>
-                  <div className="font-bold text-lg">
-                    <strong>{question}</strong>
+                <div key={i}>
+                  <h2 className={`py-3 px-3 bg-[#233B49] ${activeIndex === i ? 'delay-100 rounded-t-xl' : 'delay-100 rounded-xl'}`}>
+                    <button
+                      type="button"
+                      className="flex items-center justify-between w-full text-left font-semibold py-2"
+                      onClick={() => toggleAccordion(i)}
+                      aria-controls="faqs-text-07"
+                    >
+                      <span>{question}</span>
+                      <div className="relative pe-6 pb-4">
+                        <FaPlus
+                          className={`fill-white absolute top-0 left-0 transform origin-center transition duration-500 ease-out ${activeIndex === i ? 'rotate-180 scale-0' : 'scale-100'
+                            }`}
+                        />
+                        <FaMinus
+                          className={`fill-white absolute top-0 left-0 transform origin-center transition duration-500 ease-out ${activeIndex === i ? 'rotate-180 scale-100' : 'scale-0'
+                            }`}
+                        />
+                      </div>
+                    </button>
+                  </h2>
+                  <div
+                    id="faqs-text-07"
+                    role="region"
+                    aria-labelledby="faqs-title-07"
+                    className={`grid text-sm text-slate-600 bg-[#0a2638] rounded-b-xl overflow-hidden transition-all duration-300 ease-in-out ${activeIndex === i
+                        ? "grid-rows-[1fr] opacity-100 pt-5 pb-3 px-3 border-t-4 border-black"
+                        : "grid-rows-[0fr] opacity-0"
+                      }`}
+                  >
+                    <div className="overflow-hidden">
+                      {answer.map((item, index) => (
+                        <p
+                          className="pb-3"
+                          key={index}
+                          dangerouslySetInnerHTML={{ __html: item }}
+                        ></p>
+                      ))}
+                    </div>
                   </div>
-                  <div>
-                    <ul className="list-disc mx-12 space-y-2 leading-6">
-                      {answer.map((item) => {
-                        return (
-                          <li
-                            key={item}
-                            dangerouslySetInnerHTML={{ __html: item }}
-                          ></li>
-                        );
-                      })}
-                    </ul>
-                  </div>
-                </li>
+                </div>
               );
             })}
-          </ul>
+          </div>
         </div>
       </div>
       <FooterSection />