Close the last accordion item when clicked on it in react-accessible-accordion

Question

I have a basic FAQ component in React. My problem is when I open an accordion item, I cannot close it again when I click on it. The only way I can close the accordion is to click another question. But I also want to close it when I clicked on the question. Here is my code:

import React from "react";
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
} from "react-accessible-accordion";

import "react-accessible-accordion/dist/fancy-example.css";

export default function FAQ() {
  return (
    <>
      <Accordion>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>Question 1</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
              occaecat ut occaecat consequat est minim minim esse tempor laborum
              consequat esse adipisicing eu reprehenderit enim.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>Question 2</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
              occaecat ut occaecat consequat est minim minim esse tempor laborum
              consequat esse adipisicing eu reprehenderit enim.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </>
  );
}

Answer 1

this is how I would go about doing this :

const [FAQS, setFAQS] = useState([
    {
      title:"Question 1",
      answer:`Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
       occaecat ut occaecat consequat est minim minim esse tempor laborum
       consequat esse adipisicing eu reprehenderit enim.`,
       expanded:false
    },
    {
      title:"Question 2",
      answer:`Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
      occaecat ut occaecat consequat est minim minim esse tempor laborum
      consequat esse adipisicing eu reprehenderit enim..`,
      expanded:true
    },
  ])


  const setExpand=(index)=>e=>{
     let temp=[...FAQS]
     temp[index].expanded= !temp[index].expanded
     setFAQS(temp)
  }

  return (
    <Accordion allowZeroExpanded={true}  >
        {
          FAQS.map((FAQ,index)=><AccordionItem onClick={setExpand(index)} dangerouslySetExpanded={FAQ.expanded} key={FAQ.title} >
            <AccordionItemHeading>
              <AccordionItemButton  >{FAQ.title}</AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              <p>
              {FAQ.answer}
              </p>
            </AccordionItemPanel>
          </AccordionItem>)
        }
    </Accordion>
  );

Answer 2

You need to provide a boolean prop allowZeroExpanded to the Accordion.

 <Accordion allowZeroExpanded>
... 
 </Accordion>

It will let you close the last one which would otherwise remain always opened. See this official demo.