How to implement the "expand all" functionality for an accordion using react?

[jlara005]

Hi,

Does someone know how to implement the "expand all" functionality for an accordion using react? I don't see this in the examples.

https://design.va.gov/components/accordion

[bkjohnson]

That button & functionality is already included in the default accordion, no extra work is needed. You just use the accordion web component in your JSX or HTML like this:

<va-accordion>
  <va-accordion-item>
    <h3 slot="headline">First Item</h3>
    Item body text
  </va-accordion-item>
  <va-accordion-item>
    <h3 slot="headline">Second Item</h3>
    Body text for different item
  </va-accordion-item>
</va-accordion>

One thing to be aware of is that this feature was added in version 8.5.0 of the component-library, so you will only see it if you are using that version or a later one.

[jlara005]

We are using 6.2.1 so it's definitely version. Thanks @bkjohnson!