Accordion : expanded field to control expend state

[flodef]

Hi team,
It could be great to have an expanded field that can control the expanded state.
Eg. set it to true would expand the accordion and to false would collapse it.
Thanks in advance.

[jschuur]

Same here. My use case is that I want to add custom keyboard navigation to a page with an accordion, where hitting up/down arrow would open the previous/next Accordion item and close the current one.

[jschuur]

What I ended up doing was using a combination of refs, the underlying Headless UI data-headlessui-state attribute and calling .click().

I couldn't figure out how to close them (I don't think that's possible directly), but you can check if they're open and if they are, trigger a click() with something like this:

if (currentRef.getAttribute('data-headlessui-state') === 'open') currentRef?.click();

In my case, I wanted to expand the next one and collapse the previous one via keyboard shortcuts, so I tracked the current ref index in state and called click() as needed. You can also just loop through an entire refs array if you want to expand/collapse them all.

I first set up a ref with an array:

const questionRefs = useRef<HTMLButtonElement[]>([]);

const addRefs = (el: HTMLButtonElement) => {
  if (el && !questionRefs.current.includes(el)) {
    questionRefs.current.push(el);
  }
};

...and then later do this to get the refs set up to each Accordion entry:

{
  item.map((a: any, i: number) => (
    <Accordion key={`question_${i + 1}`} defaultOpen={i === 0}>
      <AccordionHeader className='text-left' ref={addRefs}>
        ...
      </AccordionHeader>
      ...
    </Accordion>
  ))
}

I have no idea how addRefs works like that, but it does :)

[flodef]

Wow, what a trick !!! Congrats, and thanks for sharing.
Actually, my use case was to display a SparkChart when closed and hide it on open (and display the big Chart).
To solve the problem, I use tailwindcss properties (but it's also possible with pure CSS) :
I added a group property in the Accordion's class and then group-data-[headlessui-state=open]:invisible property in my SparkChart's class.

      <Accordion className="group" defaultOpen={!isMobileSize()}>
        <AccordionHeader>
          <SparkAreaChart
                className="group-data-[headlessui-state=open]:invisible"
            />
        </AccordionHeader>
      ...
    </Accordion>

[abdelkd]

Do you mean a control prop that updates state of the accordion?

[abdelkd]

Done, I've already implemented it. a new isOpen prop that would update the accordion state whenever it changes Just need to test it and then I'll make a PR

[flodef]

Dope !!! Thanks a lot Kareem.
Can't wait to use it !

[abdelkd]

Sorry to bring you bad news but it seems like the solution I made doesn't update the accordion body. I'll try work on it on this weekend.

[abdelkd]

@flodef I've made a PR to @headlessui/react repo, once it's added I'd add the changes needed for it to work with tremor

[flodef]

Ahah, I'm glad you did this PR as mine would have been a lot messier.
Happy that you looked into it. And hopefully, the PR will be merged soon.
Thank you so much 👍
PS : As you're on it, what do you think about this other small improvement ? (#874). I have a usecase for this if needed.