version two

frontend/src/lib/components/widgets/extendableBox.svelte

@@ -3,38 +3,35 @@
     import { openExtendableNr } from "../../store"
 
     export let pages: Page[]
-    export let opened = -1
+    export let opened = ""
     let jobOffers = pages.map((p) => p.jobOffer)
     onMount(() => {
-        if (!isNaN($openExtendableNr) && $openExtendableNr !== -1) {
-            opened = $openExtendableNr
-            $openExtendableNr = -1
-        }
+        opened = location.search.split("=").at(-1)
     })
 </script>
 
 <div class="boxes">
     {#each jobOffers as box, i}
-        <div class="box" class:opened="{i == opened}">
+        <div class="box" class:opened="{pages[i].id == opened}">
             <div
                 class="upper"
                 on:keydown
                 on:click="{() => {
-                    if (opened == i) opened = -1
-                    else opened = i
+                    if (opened == pages[i].id) opened = ''
+                    else opened = pages[i].id
                 }}"
             >
                 <h4>
                     {box.title}
                 </h4>
                 <div>
-                    {#if i !== opened}<img src="/media/down.svg" alt="arrow" />{:else}<img
+                    {#if pages[i].id !== opened}<img src="/media/down.svg" alt="arrow" />{:else}<img
                             src="/media/up.svg"
                             alt="arrow"
                         />{/if}
                 </div>
             </div>
-            <div class="content" class:closed="{i !== opened}">
+            <div class="content" class:closed="{pages[i].id !== opened}">
                 {@html box.text}
                 {#if box.emailButton}
                     <a