diff options
Diffstat (limited to 'src/lib/Collapsible.svelte')
| -rw-r--r-- | src/lib/Collapsible.svelte | 17 |
1 files changed, 15 insertions, 2 deletions
diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte index f3a28d2..867117d 100644 --- a/src/lib/Collapsible.svelte +++ b/src/lib/Collapsible.svelte @@ -3,15 +3,28 @@ Non-JS collapsible content. --> +<script lang="ts"> + let open: boolean +</script> -<details> +<details bind:open> <summary> <slot name="title"> <h2>Details</h2> </slot> </summary> <div> - <slot /> + <!-- + We do this so images inside the content are not loaded until it's + open. The browser (only tested on FF) doesn't handle this, although + it probably should. + --> + <noscript> + <slot /> + </noscript> + {#if open} + <slot /> + {/if} </div> </details> |