diff --git a/src/components/containers/Accordion.svelte b/src/components/containers/Accordion.svelte index a85b03a..2bebc25 100644 --- a/src/components/containers/Accordion.svelte +++ b/src/components/containers/Accordion.svelte @@ -5,6 +5,9 @@ // Props to track all possible item IDs export let items = []; + // Store for animation state + const skipAnimation = writable(false); + // Create a store to track multiple active items using a Set const activeItems = writable(new Set()); @@ -13,14 +16,20 @@ const dispatch = createEventDispatcher(); // Methods to open/close all items - export const openAll = () => { + export const openAll = (animate = true) => { + skipAnimation.set(!animate); activeItems.set(new Set(items)); - dispatch('openAll'); + dispatch('openAll', { animated: animate }); + // Reset skip animation after a short delay + setTimeout(() => skipAnimation.set(false), 0); }; - export const closeAll = () => { + export const closeAll = (animate = true) => { + skipAnimation.set(!animate); activeItems.set(new Set()); - dispatch('closeAll'); + dispatch('closeAll', { animated: animate }); + // Reset skip animation after a short delay + setTimeout(() => skipAnimation.set(false), 0); }; // Watch for changes to activeItems and dispatch event @@ -39,6 +48,7 @@ const isActive = derived(activeItems, ($activeItems) => $activeItems.has(id)); return { isActive, + skipAnimation, activate: () => { activeItems.update((items) => { const newItems = new Set(items); diff --git a/src/components/containers/AccordionItem.svelte b/src/components/containers/AccordionItem.svelte index 23a8f56..5231ced 100644 --- a/src/components/containers/AccordionItem.svelte +++ b/src/components/containers/AccordionItem.svelte @@ -3,7 +3,7 @@ import { slide } from 'svelte/transition'; const id = crypto.randomUUID(); const { registerItem } = getContext('accordion'); - const { isActive, activate } = registerItem(id); + const { isActive, skipAnimation, activate } = registerItem(id); function toggle() { activate(); } @@ -34,7 +34,11 @@ {#if $isActive} -