Disclosure programmatically closing / opening

[rafalolszewski94]

Hi, I'm trying to do F.A.Q. section with a toggle-all button (as shown below)

I've tried it with :default-open="show" but doesn't seem to work. Is it possible to achieve it with current components?

Using @headlessui/vue v1.2.0

[sajrashid]

try this

<Disclosure defaultOpen="open">

[patrick-mcdougle]

This would work only if you need the open behavior on INITIAL RENDER. Any other programmatic control is not possible.

[felixroos]

It would be really helpful to be able to programmatically open and close, for example <Disclosure activeIndex={3}> will make sure the index 3 is open.

[potts99]

Is this still not a thing?

[ThenTech]

Also ran into this. My use case is a tree view component where I have built the nodes using Disclosures.

Everything works as expected on initial render, i.e. the first node opens, loads dynamic child nodes and then those open as well up to the correct node, based on the current URL. But when in a top node and going to a URL of a child node, the component itself knows that it should be active, and all the nodes between the top and active node know, but the Disclosure does not have a way to open it.

As mentioned in #770, a workaround includes changing the key prop on the Disclosure. I am currently getting a reference to the Disclosure.Button element and then manually calling .click() in a useEffect as the passed defaultOpen prop changes, obviously not ideal.

[leohiremysub]

That worked but definitely not ideal.

[sikenyonconcerto]

Do you have an example of this working? I'm trying to accomplish the same thing and having a nightmare.

[ThenTech]

@sikenyonconcerto I have something like this (simplified):

import { useEffect, useRef } from "react";
import { Disclosure } from "@headlessui/react";

function Disclose({ startOpen = false, children, ...props }) {
    // Programmatically opening the disclosure after initial render is currently not supported.
    // So workaround is getting the ref to the collapse button and pressing it in a useEffect...
    const btnRef = useRef(null);

    useEffect(() => {
        if (startOpen) {
            const openBtn = btnRef?.current?.firstChild;
            if (openBtn?.dataset.headlessuiState !== "open") {
                openBtn.click();
            }
        }
    }, [startOpen]);
    
    return (
        <Disclosure
            defaultOpen={startOpen}
            {...props}
        >
            <summary ref={btnRef}>
                <Disclosure.Button>
                    Summary button
                </Disclosure.Button>
            </summary>
            <Disclosure.Panel>
                {children}
            </Disclosure.Panel>
        </Disclosure>
    )
}

[elliottpost]

Adding a request for this feature here for accessibility purposes as well -- namely with print media. it would be useful to be able to bulk update state to open all before calling window.print() and then resetting the state after.

[LouisHaftmann]

how is this not a thing yet? :(

[Okdesk]

Need this.

[StGeass]

At the moment (judging by the number and frequency of topics) this is one of the most demanded features, it is so limiting in the use of this component that it is easier to write your own than to try to invent a crutch that will fix the existing one :(

[LouisHaftmann]

After an hour of trying to get this to work we literally just replaced all the headless ui components with divs and just implemented it ourselves in like 1min

[lxix]

+1 on this. I've also created my FAQ section with disclosures and I'd like to see all the answers when I print the page, regardless of original user selected state.

[I3han]

if you guys want to use Disclosure fully programmatically,
try using,

<Disclosure.Panel static>
              Yes! You can purchase a license that you can share with your
              entire team.
            </Disclosure.Panel>

this makes Whether the element should ignore the internally managed open/closed state.
so manage the panel component with a condition

{someCondition && (
<Disclosure.Panel static>
              Yes! You can purchase a license that you can share with your
              entire team.
            </Disclosure.Panel>
            )}

take a look at Disclosure.Panel