instant accordion, no animation

src/lib/components/Accordion.svelte

@@ -1,50 +1,12 @@
 <script>
   import IconChevron from '$lib/icons/icon-chevron.svg?raw';
-  import { onMount } from 'svelte';
 
   export let id = (Math.random() * 10e15).toString(16);
   export let type = "checkbox"; // or "radio"
   export let checked = false;
   export let style = "light"; // or "dark"
   export let foregroundColor = null;
   export let backgroundColor = null;
-
-  let contentEl, inputEl;
-  let lastCheckedProp = checked;
-
-  onMount(() => {
-    contentEl.style.display = inputEl.checked ? 'block' : 'none';
-    lastCheckedProp = checked;
-  });
-
-  function toggleContent() {
-    if (inputEl.checked) {
-      contentEl.style.display = 'block';
-      contentEl.style.maxHeight = '0px';
-      requestAnimationFrame(() => {
-        contentEl.style.maxHeight = `${contentEl.scrollHeight}px`;
-      });
-    } else {
-      contentEl.style.maxHeight = `${contentEl.scrollHeight}px`;
-      requestAnimationFrame(() => {
-        contentEl.style.maxHeight = '0px';
-      });
-    }
-  }
-
-  // Sync with exported prop
-  $: if (inputEl && contentEl && checked !== lastCheckedProp) {
-    inputEl.checked = checked;
-    lastCheckedProp = checked;
-    toggleContent();
-  }
-
-  function onTransitionEnd() {
-    if (!inputEl.checked) {
-      contentEl.style.display = 'none';
-    }
-    contentEl.style.maxHeight = null;
-  }
 </script>
 
 <div
@@ -54,12 +16,12 @@
     --background-color: {backgroundColor ?? (style === 'light' ? 'white' : 'black')};
   "
 >
-  <input {type} name={id} {id} {checked} on:click={toggleContent} on:click bind:this={inputEl} />
+  <input {type} name={id} {id} {checked} on:click />
   <label for={id}>
     <slot name="label"></slot>
     <span class="chevron">{@html IconChevron}</span>
   </label>
-  <div class="content" on:transitionend={onTransitionEnd} bind:this={contentEl}>
+  <div class="content">
     <slot name="content"></slot>
   </div>
 </div>
@@ -72,28 +34,14 @@
   }
 
   .content {
-    max-height: 0;
+    display: none;
     overflow: hidden;
     color: var(--foreground-color);
-    transition: max-height 0.6s cubic-bezier(0, 1, 0, 1);
   }
 
   .tab input:checked ~ .content {
-    max-height: 10000px;
-    transition: max-height 0.6s ease-in-out;
-    animation: allow-overflow 0.6s forwards;
-  }
-
-  @keyframes allow-overflow {
-    0% {
-      overflow: hidden;
-    }
-    99% {
-      overflow: hidden;
-    }
-    100% {
-      overflow: visible;
-    }
+    display: block;
+    overflow: visible;
   }
 
   label {
@@ -112,7 +60,6 @@
   .chevron {
     position: absolute;
     right: 2rem;
-    transition: transform 0.6s;
     color: var(--foreground-color);
     & > svg {
       color: var(--foreground-color);