Don't render expandable content unless expanded

2023-10-11 19:47:47 +02:00
parent 942f7c7888
commit 5bd26ce5bc
1 changed files with 7 additions and 8 deletions
--- a/svelte/src/util/Expandable.svelte
+++ b/svelte/src/util/Expandable.svelte
@@ -43,15 +43,17 @@ export let highlight = false

 		<button class="bucket_expand" on:click|stopPropagation={toggle}>
 			{#if expanded}
-			<i class="icon">expand_less</i>
+				<i class="icon">expand_less</i>
 			{:else}
-			<i class="icon">expand_more</i>
+				<i class="icon">expand_more</i>
 			{/if}
 		</button>
 	</div>
-	<div class="body" class:hidden={!expanded}>
-		<slot></slot>
-	</div>
+	{#if expanded}
+		<div class="body">
+			<slot></slot>
+		</div>
+	{/if}
 </div>

 <style>
@@ -90,7 +92,4 @@ export let highlight = false
 	text-decoration: none;
 	border-top: 1px solid var(--separator);
 }
-.hidden {
-	display: none;
-}
 </style>