svelte-animated-details

Try CTRL/CMD + F and search for content inside the `<details>`.

Toggle a Svelte component inside the `<details>`:

Duration:

Simple

Open me

Whoa content crazy

Code

<details class="simple" use:animatedDetails={{ duration }}>
	<summary>Open me</summary>
	<p>Whoa content crazy</p>
	<p>Whoa content crazy</p>
	<p>Whoa content crazy</p>
	<p>Whoa content crazy</p>

	{#if unrelated}
		Yoyo
	{/if}
</details>

Complex

Open me please

Whoa content crazy

Code

<details class="complex" use:animatedDetails={{ duration }}>
	<summary>Open me</summary>
	<div class="content">
		<p>Whoa content crazy</p>
		<p>Whoa content crazy</p>
		<p>Whoa content crazy</p>
		<p>Whoa content crazy</p>

		{#if unrelated}
			<img
				src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/2006_Ojiya_balloon_festival_011.jpg/1200px-2006_Ojiya_balloon_festival_011.jpg"
				alt="Hot air balloon stock"
				transition:slide
			/>
		{/if}
	</div>
</details>