From d20601dc475034d51a7617ba9ceedb84fdbacabf Mon Sep 17 00:00:00 2001
From: rdavis <ricky.c.davis.9@gmail.com>
Date: Thu, 4 Jul 2024 13:53:28 +0000
Subject: [PATCH] feat: Add custom Collapsible component for collapsible
 content

---
 src/lib/components/common/Collapsible.svelte | 37 ++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/lib/components/common/Collapsible.svelte

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
new file mode 100644
index 000000000..c87ffe8ba
--- /dev/null
+++ b/src/lib/components/common/Collapsible.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { afterUpdate } from 'svelte';
+
+	export let open = false;
+
+
+	// Manage the max-height of the collapsible content for snappy transitions
+	let contentElement: HTMLElement;
+  	let maxHeight = '0px'; // Initial max-height
+	// After any state update, adjust the max-height for the transition
+	afterUpdate(() => {
+		if (open) {
+			// Ensure the element is visible before measuring
+			maxHeight = `${contentElement.scrollHeight}px`;
+		} else {
+			maxHeight = '0px';
+		}
+  	});
+
+</script>
+
+<style>
+	.collapsible-content {
+	  overflow: hidden;
+	  transition: max-height 0.3s ease-out;
+	  max-height: 0;
+	}
+</style>
+
+<div>
+	<button on:click={() => open = !open}>
+		<slot name="head"></slot>
+	</button>
+	<div bind:this={contentElement} class="collapsible-content" style="max-height: {maxHeight};">
+		<slot name="content"></slot>
+	</div>
+</div>
\ No newline at end of file