How do I persist an Accordion.Item

[digitalit]

Hi guys, like with sidebar one can persist state in sidebar-provider.svelte but i can't figure out how to do the same with an Accordion.Item.

Is this possible or is this deep in bits-ui and not possible project code?

[Noah-2005]

If I'm not misunderstanding your question sidebar uses a cookie to persist its state. You could do the same by making a cookie to store your accordion state and then get that state from your load function

[digitalit]

I get that but i cant figure out how to control accordion state. In sidebar: <Sidebar.Provider open={true/false}> but how to do the same in

<Accordion.Root type="single" class="w-full sm:max-w-[100%]"> 
   <Accordion.Item value="item-1">
	<Accordion.Trigger type="button">Colors
		</Accordion.Trigger>
			<Accordion.Content>
			     <ShowColors />
			</Accordion.Content>
</Accordion.Item>
...

and where are the accordion state changed?

I want to be able to programatically control accordion

[huntabyte]

Use the value prop https://bits-ui.com/docs/components/accordion

[digitalit]

Adding
let openItem = $state('item-2'); in scripts and in code
<Accordion.Root value={openItem} onValueChange={(value) => openItem = value} > is working.

It this correct?

[Noah-2005]

Almost you should use the bind directive:

<Accordion.Root bind:value={openItem} onValueChange={(value) => openItem = value} >

• this ensures that if the accordion state is changed by the component, it also updates openItem to match Svelte docs Bind directive

[digitalit]

Well, i realized that and ended up with a really short solution:
<Accordion.Root bind:value={persistedStateValue} >

Is this okay or do i for some reason need the:
onValueChange={(value) => openItem = value}

I like your way to format code i post, how do you achieve that?

[Noah-2005]

Yeah sorry, my bad I just copied what you already had. There is no reason to use onValueChange in your case.

Also to format the code block is just markdown formatting.

just wrap your code in:

```svelte(or whatever you are using)

code goes here

```