Creating an accordion that removes from dom and a better one that does not, with Svelte actions to hide show content.

src/lib/Accordion.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { slide } from 'svelte/transition';
+	export let buttonText = '';
+	export let isOpen = false;
+</script>
+
+<div>
+	<button on:click={() => (isOpen = !isOpen)}>{buttonText}</button>
+	{#if isOpen}
+		<div transition:slide>
+			<slot />
+		</div>
+	{/if}
+</div>

src/lib/BetterAccordion.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { slide } from './Slide';
+	export let buttonText = '';
+	export let isOpen = false;
+</script>
+
+<button on:click={() => (isOpen = !isOpen)}>
+	<span class:isOpen>▲</span>
+	{buttonText}</button
+>
+<div class="accordion-content" use:slide={isOpen}>
+	<slot />
+</div>
+
+<style>
+	button {
+		display: block;
+		border: 0;
+		width: 100%;
+		text-align: left;
+		border: solid 1px #333;
+		margin: 0;
+	}
+	span {
+		margin-right: 5px;
+		display: inline-block;
+		transform: rotate(0.25turn);
+		transition: transform 0.3s ease;
+	}
+	.isOpen {
+		transform: rotate(0.5turn);
+	}
+	.accordion-content {
+		border: solid 1px #333;
+		border-top: 0;
+	}
+</style>

src/lib/Slide.js

@@ -0,0 +1,12 @@
+export function slide(node, isOpen) {
+  // Initialize
+  let initialHeight = node.offsetHeight;
+  node.style.height = isOpen ? 'auto' : 0;
+  node.style.overflow = "hidden";
+
+  return {
+    update: (isOpen) => {
+      node.style.height = isOpen ? 'auto' : 0;
+    }
+  }
+}

src/routes/__layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '$lib/style.css'
+	import '$lib/style.css';
 </script>
 
-<slot />
+<slot />

src/routes/index.svelte

@@ -1,13 +1,24 @@
 <script>
-  import Toggle from '$lib/Toggle.svelte'
+	import BetterAccordion from '$lib/BetterAccordion.svelte';
-  let isToggled = false
+	import Toggle from '$lib/Toggle.svelte';
+	let isToggled = false;
 </script>
 
 <h1>Welcome to Level Up UI</h1>
 
+<BetterAccordion isOpen={false} buttonText="Do I need a credit card??">
+	<div>
+		<p>
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit iure a accusamus harum hic,
+			ullam obcaecati dicta ab praesentium qui cupiditate labore recusandae mollitia ad, fugiat
+			neque possimus! Aperiam, distinctio!
+		</p>
+	</div>
+</BetterAccordion>
+
 <Toggle bind:isToggled label="Beta" />
 <Toggle bind:isToggled label="Beta" style="--toggleBackgroundColor: red;" />
 
 {#if isToggled}
-<h1>I'm toggled</h1>
+	<h1>I'm toggled</h1>
-{/if}
+{/if}