how to control accordion's open or close ?

[dybxin]

in the example i use change the item open filed to control, the field change but the accordion component not change.
I want the control to have only one item open at a time.

in the App.svelte:

<script>
  import { Column, Grid, Row } from "carbon-components-svelte";
	import Demo from "./Demo.svelte";

	let list = [
		{
			id: 1,
			label: "label 1",
			open: false,
		},
		{
			id: 2,
			label: "label 2",
			open: false,
		},
		{
			id: 3,
			label: "label 3",
			open: false,
		},
		{
			id: 4,
			label: "label 4",
			open: false,
		},
		{
			id: 5,
			label: "label 5",
			open: false,
		}
	]

</script>

<Grid fullWidth>
	<Row>
		<Column>
			<Demo {list} />
		</Column>
	</Row>
</Grid>

in the Demo.svelte:

<script>
	import {
		Accordion,
		AccordionItem,
	} from "carbon-components-svelte";

	export let list;
	$: list;
</script>

<Accordion>
	{#each list as row}
	<AccordionItem open={row.open} title={row.label} on:click={() =>{
		list = list.map(s => {
			s.open = false
			if (s.id === row.id) {
				s.open = true
			}
			return s
		})
		console.log('list', list)
	}}>
		<p>{JSON.stringify(row)}</p>
	</AccordionItem>
	{/each}
</Accordion>

[dybxin]

i try using the ExpandableTile component, the same question for me.

{#each list as row}
	<ExpandableTile expanded={row.open}>
		<div slot="above" on:click={(e) => {
			list = list.map(s => {
			s.open = false
			if (s.id === row.id) {
				s.open = true
			}
			return s
		})
		console.log('list', list)
		}}>
			{row.label}
		</div>

		<div slot="below">
			{row.label}
		</div>
	</ExpandableTile>
{/each}

[malinowskip]

You could try something like this:

// Demo.svelte

<script>
  import { Accordion, AccordionItem } from "carbon-components-svelte";

  export let list;
  let openId;
</script>

<Accordion>
  {#each list as row}
     <AccordionItem open={row.id === openId} on:click={() => openId = row.id} ... />
  {/each}
</Accordion>

[dybxin]

@malinowskip thanks a lot. but it need click twice. tap an unexpanded item, flash it once, and then close , and click again to expand

[malinowskip]

Actually, In my example open should be changed to bind:open to make it reactive. However, I noticed that this prop is not used in most of the examples in the docs, so the toggling should work if you simply omit open.

[dybxin]

@malinowskip thanks a lot. i noticed that svelte can only bind to an identifier (e.g. foo) or a member expression (e.g. foo.bar or foo[baz])svelte(invalid-directive-value). so bind:open={row.id === openId} is not supported. following your advice, I made some adjustments and it was right for me, thanks again!

let list = [
		{
			id: 1,
			label: "label 1",
			open: false,
		}
]

<Accordion>
	{#each list as row}
		<AccordionItem
			title={row.label}
			bind:open={row.open}
			on:click={(e) => {

				list.map((element) => {
					if (element.open) {
						return element.open= false;
					}
				});

			}}
		>
		</AccordionItem>
	{/each}
</Accordion>