How to open/close Accordion programmatically

[irhamputra]

Hi Author and the community,

I'm asking for a help about how to open/close the accordion programmatically? I've been searching in the docs and the issue there is no answer related to this topic.

Any ideas and workaround would be appreciated.
Thank you

[jjenzz]

All of our components can be "controlled" if you would like to open/close them programmatically.

const [value, setValue] = React.useState('one');

return () => (
  <div>
	{/* Something outside of Accordion that controls the open content */}
    <button onClick={() => setValue('two')}>Open two</button>

    <Accordion.Root type="single" value={value} onValueChange={setValue}>
      <Accordion.Item value="one">
        <Accordion.Header>
          <Accordion.Trigger>One</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Content for one
        <Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="two">
        <Accordion.Header>
          <Accordion.Trigger>Two</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content>
          Content for two
        <Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  </div>

[eliuAtFanatics]

Anyone else able to make this work to close the opened single AccordionItem? When I set the state driving value to undefined, the currently opened item just remains opened. :/

I'm seeing this same behavior as well right now with dynamically programming the value. Has anyone been able to fix this when the value is set to undefined?

[thanksphil]

Anyone else able to make this work to close the opened single AccordionItem? When I set the state driving value to undefined, the currently opened item just remains opened. :/

Also experiencing this issue. I have seen this with both a regular state hook and when using mobx-state-tree state; when the state (value) is set to undefined is doesn't collapse the accordion item, though for me clicking a second time does then collapse it.

[charpeni]

I experienced the same issue as described above where a controlled <Accordion.Root> doesn't allow being closed by passing undefined as a value. I ended up setting the value to an empty string: setValue(''). This closes it probably because it triggers a change combined with collapsible and single, which doesn't allow multiple accordions to be open, but the newly set value doesn't match with any existing accordions.

cc @TomasHubelbauer @eliuAtFanatics @thanksphil

[poulch]

I experienced the same issue as described above where a controlled <Accordion.Root> doesn't allow being closed by passing undefined as a value. I ended up setting the value to an empty string: setValue(''). This closes it probably because it triggers a change combined with collapsible and single, which doesn't allow multiple accordions to be open, but the newly set value doesn't match with any existing accordions.

cc @TomasHubelbauer @eliuAtFanatics @thanksphil

It works, thanks @charpeni

[benjick]

For single accordion:

function MyComponent() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <Accordion
      type="single"
      collapsible
      value={isOpen ? "open" : "closed"}
      onValueChange={(value) => setIsOpen(value === "open")}
    >
      <AccordionItem value="open" className="border rounded-lg">
      ...
      </AccordionItem>
    </Accordion>
  );
}

[KarthikRaju391]

Is there a way to know the open or closed state of an accordion?

[joaom00]

via css you can use the data-state="open | closed" attribute to style and via js controlling the component like #824 (comment)

[emilioaray-dev]

If possible, here's an example evaluating the [data-state] value and using useRef in case you need to map your component.

import React, { useEffect, useRef, useState } from "react";
import { Accordion, AccordionTrigger, AccordionContent, AccordionItem } from "@radix-ui/react-accordion";

const YourComponent = () => {
  const [isOpenAccordion, setIsOpenAccordion] = useState(null);
  const [isClicked, setIsClicked] = useState<boolean | null>(null);
  const accordionTriggerRef = useRef(null);

  useEffect(() => {
    if (accordionTriggerRef.current) {
      const accordionTriggerElement = accordionTriggerRef.current;
      const dataState = accordionTriggerElement.getAttribute("data-state");

      if (dataState === "closed") {
        setIsOpenAccordion(false);
        console.log("AccordionTrigger is closed.");
      }

      if (dataState === "open") {
        setIsOpenAccordion(true);
        console.log("AccordionTrigger is open.");
      }
    }
  }, [isClicked]);

  return (
    <>
      <div>
        <Accordion type="multiple">
          <AccordionItem ref={accordionTriggerRef} value="YourAccordion">
            <AccordionTrigger
              onClick={() => {
                setIsClicked(!isClicked);
              }}
            >
              {/* Your AccordionTrigger UI here */}
            </AccordionTrigger>
            <AccordionContent>
              {isOpenAccordion ? (
                // Content to display when the Accordion is open
                <p>Accordion Content (This content is shown only if the Accordion is open)</p>
              ) : null}
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </>
  );
};

export default YourComponent;

I hope you find it useful. 👍

[jjenzz]

@emilioaray-dev i'm a bit late seeing this but as @joaom00 suggested, the controlled API is meant for this and it would make your code simpler (more declarative):

import React, { useEffect, useRef, useState } from "react";
import { Accordion, AccordionTrigger, AccordionContent, AccordionItem } from "@radix-ui/react-accordion";

const YourComponent = () => {
  const [values, setValues] = React.useState<string[]>([]);

  return (
    <>
      <div>
        <Accordion type="multiple" value={values} onValueChange={setValues}>
          <AccordionItem value="YourAccordion">
            <AccordionTrigger>
              {/* Your AccordionTrigger UI here */}
            </AccordionTrigger>
            <AccordionContent>
              {/* derive the `isOpen` state based on `values` */}
              {values.includes("YourAccordion") ? (
                // Content to display when the Accordion is open
                <p>Accordion Content (This content is shown only if the Accordion is open)</p>
              ) : null}
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </>
  );
};

export default YourComponent;

[jewel109]

@jjenzz how can i trigger from other component? suppose I will click a button which is not part of the accordion component.

update:
I solved it from Your first answer.

[sigmarsson]

Could anyone explain me what the purpose is of <AccordionTrigger> instead of <Accordion.Trigger> ?

[jjenzz]

they are the same. both parts exist because people like to import in different ways depending on the tree-shaking capabilities of their bundler. the convention is import * as Accordion (so you can use Accordion.Trigger) but some bundlers might not tree-shake appropriately there. for that case, you can import { AccordionTrigger }.

[sigmarsson]

Ahh, merci! - I have not been thinking from that perspective.

[TobiasLueger]

Hey all,
I followed this conversation. How can I open all ans close all with two seperate Buttons. I tried something like that but it doesn't work.

import { Root as RDXAccordion } from "@radix-ui/react-accordion";
import clsx from "clsx";
import { Children, isValidElement, useEffect, useState } from "react";

import styles from "./Accordion.module.scss";
import { AccordionProps } from "./types.ts";

export function Accordion({
  children,
  className,
  type,
  dataTestId,
  openAll,
  ...props
}: AccordionProps) {
  const [openAccordionItems, setOpenAccordionItems] = useState<string[]>();

  const setOpenValues = (values: string[]) => {
    setOpenAccordionItems(values);
  };

  useEffect(() => {
    const convertAllAccordionItemValuesToStringArray = () => {
      const values: string[] = [];
      const getAllAccordionItemValues = (children: React.ReactNode) => {
        Children.forEach(children, (child) => {
          if (isValidElement(child)) {
            console.log("Test", child);
            if ((child.type as any).displayName === "AccordionItem")
              return values.push((child as React.ReactElement).props.value);
            return getAllAccordionItemValues(
              (child as React.ReactElement).props.children
            );
          }
        });
      };
      getAllAccordionItemValues(children);
      return values;
    };

    if (openAll) {
      setOpenAccordionItems(convertAllAccordionItemValuesToStringArray());
    } else {
      setOpenAccordionItems([]);
    }
  }, [children, openAll]);

  return (
    <RDXAccordion
      type={type || "multiple"}
      className={clsx(className, styles.accordion)}
      data-testid={dataTestId || "accordion"}
      value={openAccordionItems} //there has to be a array of AccordionItem Values to open all accordions
      onValueChange={setOpenValues}
      {...props}
    >
      {children}
    </RDXAccordion>
  );
}`

I hope someone have an Idea 🔥 ❤️

[uzzal50]

@jjenzz Hello jenna I want my accrdion item to disable when its data state is open how can i achieve this thank you ?