Nested Disclosure

[mhsfh]

first of thanks for everyone contribute on this awesome project,
in some cases we need to create nested Disclosure like in side filter.
currently when i nest Disclosure and i click on Disclosure.Button child it close its parent of his parent

what i imagine as solution is passing id to Disclosure and passe the same id to the button so it will controle the right panel
make it possible to create instance of Disclosure

thanks

[lucgauer]

@mhsfh Did you use <Disclore> twice (one for the parent and one for the nested child)?

<Disclosure>
  <Disclosure.Button>🔽</Disclosure.Button>
  <Disclosure.Panel>
    <Disclosure>
      <Disclosure.Button>🔽</Disclosure.Button>
      <Disclosure.Panel>Lorem ipsum</Disclosure.Panel>
    </Disclosure>
  </Disclosure.Panel>
</Disclosure>

Worked for my use case.

[lpalazzi]

It would be nice to be able to control which disclosure a button is referring to. The example given by @lucgauer works for nested disclosures that intend to be independent from one another, but what if I want a button that controls the parent disclosure within the child disclosure?

For example:

<Disclosure id='parent'>
  <Disclosure.Button>🔽</Disclosure.Button>
  <Disclosure.Panel>
    <Disclosure id='child'>
      <Disclosure.Button for='parent'>🔽</Disclosure.Button> // will toggle the parent panel
      <Disclosure.Button for='child'>🔽</Disclosure.Button> // will toggle the child panel
      <Disclosure.Panel>Lorem ipsum</Disclosure.Panel>
    </Disclosure>
  </Disclosure.Panel>
</Disclosure>