How do I set an Accordion.Item so it's content is automatically opened/displayed.

[rhscjohn-dev]

Using the following code.

<script lang="ts">
  import * as Accordion from "$lib/components/ui/accordion/index.js";
</script>
 
<Accordion.Root class="w-full sm:max-w-[70%]">
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content
      >Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content
    >
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Is it styled?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It comes with default styles that matches the other components'
      aesthetic.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-3">
    <Accordion.Trigger>Is it animated?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It's animated by default, but you can disable it if you prefer.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

I want item-2 content to be automatically opened.

<Accordion.Item value="item-2">
    <Accordion.Trigger>Is it styled?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It comes with default styles that matches the other components'
      aesthetic.
    </Accordion.Content>
  </Accordion.Item>

Thanks.

[shyakadavis]

Hello, @rhscjohn-dev

If it's just one value that you want, then pass the name of the item, in your case, item-2 to the value prop of the Accordion.Root.

If you want multiple items open, pass the names of the values, and include the multiple prop set to true.

e.g.

	<Accordion.Root multiple value={['item-1', 'item-2']}>