Simple Accordian component for Svelte (from https://firesearch.dev)

Accordian.svelte

<script lang='ts'>
	import { slide } from 'svelte/transition'
	export let open: boolean = false
	export function toggle() {
		open = !open
	}
</script>
<a 
	href='#open'
	on:click|preventDefault={ toggle }
><slot name='link' {open}></slot></a>
{#if open}
	<div transition:slide>
		<slot name='content'></slot>
	</div>
{/if}

example.svelte

<script lang='ts'>
	import Accordian from './Accordian.svelte'
</script>
<Accordian let:open>
	<span slot='link'>
		{#if !open}
			Show more
		{:else}
			Hide
		{/if}
	</span>
	<div slot='content'>
		Content goes here
	</div>
</Accordian>