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>
    )
}

[fembuelita]

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? :(

[NetFlareSuperAdmin]

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

[nickap]

A possible workaround for dynamically changing the open/close state of your Disclosure component is to re-render it when needed. By using the defaultOpen prop, we can ensure the component renders in the desired state.

Since the author @rafalolszewski94 of the discussion uses Vue, it's worth mentioning that we can force a re-render of a component by changing its key attribute.

<div :key="refToMutateAndTriggerReRender">
   <Disclosure defaultOpen="wantedBooleanState">
</div>

So if we programmatically mutate the value of refToMutateAndTriggerReRender (we can increase a number or toggle a boolean value), our component will render in the wanted state.

Keep in mind this approach could be expensive if your Disclosure component is large and contains various other components, which will also re-render down the DOM tree.

[Semkoo]

I was able to achive with as and I have a custom component AccordionButton with a forward ref etc and was able to achieve as follows

import React from "react";
import { cn } from "../../utils/cn";
import { Disclosure, Transition } from "@headlessui/react";
import { Button } from "./Button";

interface AccordionItem {
  title?: string;
  titleClassName?: string;
  content?: React.ReactNode;
  contentClassName?: string;
  isOpen?: boolean;
  onToggle?: (isOpen: boolean) => void;
}

interface AccordionProps {
  items?: AccordionItem[];
  allowMultiple?: boolean;
  defaultOpenIndices?: number[];
  className?: string;
}

interface AccordionButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: React.ReactNode;
  className?: string;
  open?: boolean;
}

const AccordionButton = React.forwardRef<
  HTMLButtonElement,
  AccordionButtonProps
>(({ children, className, open, ...props }, ref) => {
  return (
    <button
      ref={ref}
      className={cn(
        "flex w-full items-center justify-between rounded-none px-0 py-2 font-medium text-gray-800",
        "focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-50",
        "border-b",
        className,
      )}
      {...props}
    >
      {children}
      <svg
        className={`h-4 w-4 transition-transform duration-200 ${
          open ? "rotate-180 transform" : ""
        }`}
        fill="none"
        viewBox="0 0 25 24"
        stroke="currentColor"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </button>
  );
});

AccordionButton.displayName = "AccordionButton";

const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItem>(
  (
    {
      title,
      titleClassName,
      content,
      contentClassName,
      isOpen = false,
      onToggle,
    },
    ref,
  ) => {
    if (!isOpen) {
      return (
        <Transition
          enter="transition duration-100 ease-out"
          enterFrom="transform opacity-0"
          enterTo="transform opacity-100"
          leave="transition duration-75 ease-out"
          leaveFrom="transform opacity-100"
          leaveTo="transform opacity-0"
        >
          <AccordionButton
            open={isOpen}
            onClick={() => {
              onToggle?.(!isOpen);
            }}
          >
            <span>{title}</span>
          </AccordionButton>
        </Transition>
      );
    }

    return (
      <Disclosure ref={ref} as="div" className="accordion-item" defaultOpen>
        {({ open }) => (
          <>
            <Disclosure.Button
              as={AccordionButton}
              open={open}
              onClick={() => {
                onToggle?.(!isOpen);
              }}
            >
              <span>{title}</span>
            </Disclosure.Button>
            <Transition
              enter="transition duration-100 ease-out"
              enterFrom="transform opacity-0"
              enterTo="transform opacity-100"
              leave="transition duration-75 ease-out"
              leaveFrom="transform opacity-100"
              leaveTo="transform opacity-0"
            >
              <Disclosure.Panel
                className={cn(
                  "py-3 transition-all duration-200",
                  contentClassName,
                )}
              >
                {content}
              </Disclosure.Panel>
            </Transition>
          </>
        )}
      </Disclosure>
    );
  },
);

AccordionItem.displayName = "AccordionItem";

const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
  (
    { items, allowMultiple = false, className, defaultOpenIndices = [] },
    ref,
  ) => {
    const [openIndices, setOpenIndices] =
      React.useState<number[]>(defaultOpenIndices);

    const toggleAccordion = React.useCallback(
      (isOpen: boolean, index: number) => {
        if (allowMultiple) {
          setOpenIndices((prev) =>
            isOpen ? prev.filter((i) => i !== index) : [...prev, index],
          );
        } else {
          setOpenIndices(isOpen ? [index] : []);
        }
      },
      [allowMultiple],
    );

    return (
      <div className={cn("mx-auto w-full", className)}>
        {items?.map((item, index) => {
          return (
            <AccordionItem
              key={index}
              {...item}
              onToggle={(isOpen) => toggleAccordion(isOpen, index)}
              isOpen={openIndices.includes(index)}
            />
          );
        })}
      </div>
    );
  },
);

Accordion.displayName = "Accordion";

export { Accordion };
export type { AccordionProps, AccordionItem };

Use Case example

...
<Accordion
   className="..."
   items={
   [
    {
      title: "Item 1",
      content: <>Test 1</>,
    },
    {
      title: "Item 2",
      content: <>Test 2</>,  
     },
    ]}
    />              
...