Disclosure - Close on Opening new - Vue 3

[boopathydreams]

Hello,
I wanted to know whether its possible to close the previously opened disclosure component automatically while opening other disclosure.
I couldn't figure out the possibilities.
It will be helpful if I get any solution here!
Vue-3

TIA

[NathanielAwoke]

As of this writing I couldn't find any proper component API to achieve this functionality. Although we can get the same result with some work around. Here is a code snippet ( React )

<div>
  {
    faqs.map((item, index) => (
      <Disclosure as="div" key={index} defaultOpen={!index}>
        {({ open }) => (
          <>
            <dt className="text-lg">
              <Disclosure.Button className={`text-left w-full flex justify-between items-start text-gray-400 ml-2 focus:outline-none ${open ? 'btn-open' : ''}`}>
                <span className="font-medium text-seven-color font-hind">{faq.question}</span>
                <span className="ml-6 h-7 flex items-center">
                  <ChevronDownIcon
                    className={`text-first-text-color ${open ? '-rotate-180 h-6 w-6 transform' : 'rotate-0 h-6 w-6 transform'}`}
                    aria-hidden="true"
                    onClick={() => {
                      const currentButton = document.querySelector(`.btn-open`)
                      if (!open && currentButton)
                        currentButton.click()
                    }}
                  />
                </span>
              </Disclosure.Button>
            </dt>

            <Disclosure.Panel as="dd" className="mt-2">
              <p>{faq.answer}</p>
            </Disclosure.Panel>

          </>
        )
        }
      </Disclosure>
</div>

Explanation: Whenever a new component is clicked to open it, then the previous opened item ( identified by having class name .btn-open ) is clicked explicitly. We can change class name on the button according to the render prop we get <Disclosure.Button className={text-left w-full flex justify-between items-start text-gray-400 ml-2 focus:outline-none ${open ? 'btn-open' : ''}}>

[lansolo99]

@NathanielAwoke Tested and it works ! But I think it would be nice to have a prop available for this common behavior. Either in Vuetify or Material-ui, a single open item is the default behavior.