Automaticly close a disclosure when a new one is opened?

[Notaduck]

Hi There.
Has anybody successfully implemented a list of disclosures in react, where there only can be one opened disclosure, and the opened will automatically be closed when a new one is opened?

[mkrkelj1]

Currently working on this, though my solution is kind of hack-y, as there's no programmatic interface to do this cleanly.

[Notaduck]

I would love to see your solution to this!

[sontiO]

Did you end up finding a workaround for this?

[cdt-eth]

checking in on this! @mkrkelj1

[raymondkingston]

Hi @mkrkelj1, I know it's a year later, but would you care to share your solution? Can't believe this option isn't built in by default.
Thanks!

[IamLizu]

Here's what I did as a workaround (not necessarily a good way),

In the Disclosure.Button or the element that is being clicked, I added the following function as event handler,

const handleDiscloserChange = (idx) => {
    openIndex &&
         openIndex !== idx &&
         document.getElementById(openIndex).click();

    idx === openIndex ? setOpenIndex(null) : setOpenIndex(idx);
};

I have a state for the openIndex and I have set the idx as id in the Disclosure.Button. I check whether the there's a openIndex and if openIndex is similar to the current idx, if not, I click the openIndex manually to close it.

Please do suggest improvements and better alternative.