Accordion Example

README.md

Created with svelte.dev/repl

App.svelte

<script>
	import { spring } from 'svelte/motion';
	
	let open = false;
	let wrapperHeight = spring(0);
	let contentHeight
	
	$: {
		if (open) wrapperHeight.set(contentHeight)
	  else wrapperHeight.set(0) 
	}
</script>

<style>
	div {
		overflow: hidden;
	  background-color: #ff3e00;
	}
	p {
	  margin: 0;
		padding: 1rem;
		color: white;
	}
</style>

<button on:click="{() => open = !open}">Toggle</button>

<div style="height: {$wrapperHeight}px" >
	<p bind:offsetHeight={contentHeight}>Accordion content...</p>
</div>

<pre>
Wrapper height: {$wrapperHeight}
Content height: {contentHeight}
</pre>

meta.json

{
  "svelte": true
}