Disclosure example, how to open by default ?

[sajrashid]

Hi,

I'm following the example here

Probably being silly, but I can't work out how to open the panel by default & close it on click, any pointers appreciated?

import { Disclosure, Transition } from '@headlessui/react'

function MyDisclosure() {
  return (
    <Disclosure>
      {({ open }) => (
        <>
          <Disclosure.Button>Is team pricing available?</Disclosure.Button>

          {/*
            Use the Transition + open render prop argument to add transitions.
          */}
          <Transition
            show={open}
            enter="transition duration-100 ease-out"
            enterFrom="transform scale-95 opacity-0"
            enterTo="transform scale-100 opacity-100"
            leave="transition duration-75 ease-out"
            leaveFrom="transform scale-100 opacity-100"
            leaveTo="transform scale-95 opacity-0"
          >
            {/*
              Don't forget to add `static` to your Disclosure.Panel!
            */}
            <Disclosure.Panel static>{/* ... */}</Disclosure.Panel>
          </Transition>
        </>
      )}
    </Disclosure>
  )
}```

Thanks

[sajrashid]

I got it,

<Disclosure defaultOpen="open">

Thanks

[glebgolov-ziosem]

Thanks for the answer.

For the Vue component, I found out that you should type this:
<Disclosure :defaultOpen="true">