<Accordion.Panel isOpen={true}> doesn't work also setOpen and isOpen doesn't work with props

[iliafaramarzpour]

Describe the bug
In the project, I need to manage the accordions panel and be able to open and close them, but I can't, I also checked the Flowbite codes and realized that they are not written correctly.

Expected behavior
I want to manage isOpen and setOpen from the accordion panel and they work correctly.

Screenshots

System information:

• Device: Mac
• Browser: Chrome

Project information:

• Tailwind: ^3.2.4
• Flowbite: ^1.6.0
• Flowbite React: ^0.4.2
• Type: Next.js - 13.4.1

[rluders]

Sorry, I don't get the problem. Can you give more details?
All the examples inside the documentation page seem to work properly.

You can get the source code to the examples here: https://github.com/themesberg/flowbite-react/blob/main/src/docs/pages/AccordionPage.tsx

PS: If you cold add a video demonstrating the problem, it would be better to understand, or to provide a sample project.

[iliafaramarzpour]

Sorry, I don't get the problem. Can you give more details? All the examples inside the documentation page seem to work properly.

You can get the source code to the examples here: https://github.com/themesberg/flowbite-react/blob/main/src/docs/pages/AccordionPage.tsx

PS: If you cold add a video demonstrating the problem, it would be better to understand, or to provide a sample project.

I have a form for the user's profile in each accordion panel, and I want the user to see a SAVE button at the end of each accordion panel and open the next accordion panel after clicking the button. It means that I can control which accordion panel is open with a state and manage its opening and closing.

[iliafaramarzpour]

Sorry, I don't get the problem. Can you give more details? All the examples inside the documentation page seem to work properly.

You can get the source code to the examples here: https://github.com/themesberg/flowbite-react/blob/main/src/docs/pages/AccordionPage.tsx

PS: If you cold add a video demonstrating the problem, it would be better to understand, or to provide a sample project.

please read this : https://github.com/themesberg/flowbite-react/tree/main/src/lib/components/Accordion 
And see how the logic of isOpen and setOpen is written in Accordion.tsx and AccordionPanel.tsx files.

[rluders]

I still don't get it. Can you provide an example project?

[realvandi]

I'm also having this problem myself. In a very simple use case:

const [isOpen, setIsOpen] = useState(false);
  const toggleAccordion = () => {
    setIsOpen(!isOpen);
    console.log(isOpen)
  };
  return (
   <>
    <Accordion>
      <AccordionPanel isOpen={isOpen}>
        <AccordionTitle theme={accordionTitleTheme}>Hello</AccordionTitle>
        <AccordionContent>World</AccordionContent>
      </AccordionPanel>
    </Accordion>
          <Button onClick={toggleAccordion}>
          {isOpen ? 'Close Accordion' : 'Open Accordion'}
        </Button>
        </>);

Does not seem to open or close the accordion panel accordingly. The isOpen state is being changed, but the state is not being reflected by the accordionPanel.

[realvandi]

To note here is that I've also attempted using the setOpen prop for AccordionPanel, which imo is lacking documentation on how it's supposed to be used. As someone trying to use AccordionPanel, the setOpen prop is lacking description on how it's supposed to be used, and what it's for.

[rluders]

@realvandi documentation update should be coming soon. The library wasn't released yet, so, it is expected to have missing documentation, but the code is always your best friend in this case.

[realvandi]

@rluders thanks for the quick response, it's very much appreciated. In the meanwhile, any hints on what could be done in order to trigger the opening/closing of the AccordionPanel? I can't seem to figure out what's wrong, even after reading through the code. Any answer would be much appreciated, thanks again for responding

[rluders]

@IuriPires can you help on this one? I'm not sure when I'll have time to test it right now.

[IuriPires]

@IuriPires can you help on this one? I'm not sure when I'll have time to test it right now.

Sure!!

[rluders]

Could someone confirm if the issue still exists?

[mwesterham]

Stumbled upon this thread since I ran into the same problem. I believe this is still an issue. My use case calls for the accordion panels to default open.

    <Accordion alwaysOpen>
      <Accordion.Panel isOpen={true}>
        <Accordion.Title>
          One
        </Accordion.Title>
        <Accordion.Content>
          1
        </Accordion.Content>
      </Accordion.Panel>
      <Accordion.Panel isOpen={true}>
        <Accordion.Title>
          Two
        </Accordion.Title>
        <Accordion.Content>
          2
        </Accordion.Content>
      </Accordion.Panel>
    </Accordion>

Here, only the "One" accordion panel is open when both should be open. I am using the latest npm version flowbite-react@0.5.0