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