Functionality of reactjs accordion

JavaScript
1

I’m working on an accordion in reactjs using react hooks and tailwind CSS, I’ve been able to toggle the Accordion to open but I can’t get it to close back and make the icons control the accordion toggle.
Here’s the bully:

import React, { useState, useRef } from "react";
import { FiPlus, FiX } from "react-icons/fi";

const Faqs = () => {
const [currentFaq, setCurrentFaq] = useState(0);

const [faqQuestions, setFaqQuestions] = useState([
    {
    id: 0,
    name: "What is Scratch9ja?",
    details:
        "veryyyy long yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga",
    isActive: false
    },
    {
    id: 1,
    name: "How does it work?",
    details:
        "veryyyy long yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga!",
    isActive: false
    },
    {
    id: 2,
    name: "Where can i play?",
    details:
        "veryyyy long yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga",
    isActive: false
    },
    {
    id: 3,
    name: "What can i win on Scratch9ja?",
    details:
        "veryyyy long yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga yama yama jaga jaga",
    isActive: false
    }
]);

  // Accordion visibility toggle

  const [accordionVisiblily, setAccordionVisiblily] = useState(false);
  const changeIcon = accordionVisiblily ? <FiX /> :  <FiPlus />;
  const toggleAccordionVisibility = () => {
      setAccordionVisiblily(accordionVisiblily ? true :  false );
  };

const faqTab = faqQuestions.map((faq) => {
    const detailsDisplay = faq.isActive ? "block" : "hidden";

    return (
    <div
        key={faqQuestions.id}
        onClick={() => filterAccordion(faq.id)}
        className={""}
    >
        <span
        className={
            "Accordion-name md:font-bold ml-auto mr-auto mt-2 text-2xl pt-5 pl-8"} >
        {faq.name}
        <i className="faq-styles" onClick={() => toggleAccordionVisibility(faq.id)}>{changeIcon}</i>
        </span>
        <p className={" ml-auto mr-auto Accordion-content " + detailsDisplay}>
        {faq.details}
        </p>
    </div>
    );
});




const filterAccordion = (faqId) => {
    let updatedFaqs = faqQuestions.map(faq => {
    if (faq.id === faqId) {
        faq.isActive = true;
    } else {
        faq.isActive = false;
    }
    return faq;
    });
    setCurrentFaq(updatedFaqs);
};

return (
    <div className=" mb-20 ">
        <h1 className="text-5xl md:font-bold text-center faq-header ">
            Frequently Asked Questions
        </h1>
        <div className="  ">{faqTab}</div>
    </div>
);
};

export default Faqs;

I trust y’all to help me with this one.
Thanks in addy guys :pray:

2

I think the problem could be this:

Your ternary asks if the accordion is currently visible, and if it is, you’re setting it to true again. It’ll never be false.

A better way whenever you toggle a value between true and false would be by accessing the previous state and just return the opposite:

  const toggleAccordionVisibility = () => {
      setAccordionVisiblily(prevVisibility => !prevVisibility);
  };
1 Like
3

Thank you @jsdisco,
I just applied this method but it didn’t fix the problem, I think the problem might be from the filterAccordion function. still trying to fix it

4

It’s a little difficult to debug if it’s impossible to actually see the code in action, so all I can do right now is advise you to console.log every little detail to narrow it down until you find the source of the error. Does state get updated as you expect? Have you inspected the DOM to see if the styles are applied as they should be?

1 Like
5

Thank you for the suggestion, That’ll be my next step of action

6

If you get stuck, you can create a codepen or a codesandbox, it’ll be much easier to help then.

1 Like
7

Thank you very much @jsdisco! I figured it out

1 Like