[Accordion] Toggling all Accordion.Items

[binhxn]

Hello 👋 ,

I was wondering if there's an easy way to toggle all Accordion.Items at the same time without requiring the value prop? For example, here's a contrived API using an openAll prop on the Root component:

function ToggleAllAccordions() {
  const [isClosed, setClosed] = useState(false);

  return (
    <>
      <button onClick={() => setClosed(!isClosed)}>Toggle all accordions</button>
      <Accordion.Root openAll={isClosed} type="multiple" collapsible>
        <Accordion.Item>…</Accordion.Item>
        <Accordion.Item>…</Accordion.Item>
      </Accordion.Root>
    <>
  )
}

Or if there's a way to expose all the Accordion.Item's assigned values through, let's say, an onAllValueChange callback, then that can help facilitate this behavior.

Would love to hear back with your feedback! Thanks in advance!

[benoitgrelard]

@binhxn, the way to do this is to use the controlled API.

For example, something like:

const items = [
  { value: 'one',  title: '…', content: <>…</> },
  { value: 'two',  title: '…', content: <>…</> },
  { value: 'three',  title: '…', content: <>…</> },
];
const allValues = items.map(item => item.value);

function ToggleAllAccordions() {
  const [value, setValue] = useState([]);

  return (
    <>
      <button onClick={() => setValue(prev => prev.length > 0 ? [] : allValues}>Toggle all accordions</button>
      <Accordion.Root type="multiple" collapsible value={openItems} onValueChange={setOpenItems}>
        {items.map(item => <Accordion.Item value={item.value}>…</Accordion.Item>)}
      </Accordion.Root>
    <>
  )
}

Depending on what you want the UX to be when "toggling" all items (if only some are currently open) you may want to change this bit:

setValue(prev => prev.length > 0 ? [] : allValues

At the moment this is saying, "if there are any items open and you click the button, close them all, otherwise open them all".
But you could do it the other way, where you close them all only if they are all open (prev has all the same values as allValues), otherwise open them all.

Hope this makes sense ✌️

[benoitgrelard]

By the way, nothing is forcing you to abstract the items like I did either, I just did this so it would be easier to demonstrate the allValues thing, rather than manually writing ['one', 'two', 'three'].

[binhxn]

This is what I was looking for! Thanks for the detailed response!