Unable to close open AccordionItem when autocollapse is used

[dan-hughes]

Current Behavior

Upgraded a project to v0.124.2 and migrated the accordion I have.

As the title really, when autocollapse is set on the Accordion, the open item cannot be closed.

Also on:toggle doesn't seem to fire. Let me know if you want that in a separate issue or keep it with this as it's related.

Steps To Reproduce

Add this into a page and the open item should close when clicked

<Accordion autocollapse>
    <AccordionItem>
		<svelte:fragment slot="summary">
			<h3>Summary 1</h3>
		</svelte:fragment>
		<svelte:fragment slot="content">
			<h4>Content</h4>
		</svelte:fragment>
	</AccordionItem>
	<AccordionItem>
		<svelte:fragment slot="summary">
			<h3>Summary 2</h3>
		</svelte:fragment>
		<svelte:fragment slot="content">
			<h4>Content</h4>
		</svelte:fragment>
	</AccordionItem>
</Accordion>```


### Anything else?

_No response_

[endigo9740]

As the title really, when autocollapse is set on the Accordion, the open item cannot be closed.

Sorry if this was missed in prior discussion, but this is working as intended. Remove autocollapse if you wish to open/close Items independently. The overhead required to allow for Auto-Collapse mode to allow for closing all items probably isn't worthwhile right now.

Also on:toggle doesn't seem to fire. Let me know if you want that in a separate issue or keep it with this as it's related.

We'll keep this ticket open to address this.

[endigo9740]

The on:toggle event will now be present for each AccordionItem. This will provide a suite of data:

• The forwarded on:click event data
• The unique ID auto-assigned per Item
• The current open state
• The autocollapse mode setting

[AgarwalPragy]

The overhead required to allow for Auto-Collapse mode to allow for closing all items probably isn't worthwhile right now.

@endigo9740 I understand that you're already swamped with the 1.0 release. Would you be willing to accept a PR for this feature?

[endigo9740]

It's not an issue if it's working as intended. So no, I would not not.

[AgarwalPragy]

it's working as intended.

Should this be submitted as a feature request? 😅

The usecase is very common - allow user to collapse all items if needed, while also limiting the number of collapsed items to be at max 1

Plus the initial state of the accordion is all-closed, so why not? 🤷

[AgarwalPragy]

Although the workaround is pretty simple

<script>
  import { Accordion, AccordionItem } from '@skeletonlabs/skeleton'

  let open = null
</script>

<Accordion>
  {#each [1, 2, 3] as index (index)}
    <AccordionItem on:click={() => {open = open === index ? null : index}} open={open === index}>
      <svelte:fragment slot="summary">{index}</svelte:fragment>
      <svelte:fragment slot="content">{index}</svelte:fragment>
    </AccordionItem>
  {/each}
</Accordion>

[rairulyle]

Can we have this feature request open, @endigo9740 @AgarwalPragy ? One of the feedback I received during my user test is why the heck they can't close the accordion haha. But at the same time, I wanna keep the auto collapse function.

[AgarwalPragy]

Can we have this feature request open, @endigo9740 @AgarwalPragy ? One of the feedback I received during my user test is why the heck they can't close the accordion haha. But at the same time, I wanna keep the auto collapse function.

For starters, you can use the workaround mentioned above #945 (comment)