Add "Expand all" button intended for JS users

EthanThatOneKid · Jan 18, 2023 · a2ec585 · a2ec585
1 parent 6ae8ce8
commit a2ec585
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/routes/(site)/s23positions/+page.svelte b/src/routes/(site)/s23positions/+page.svelte
@@ -6,6 +6,11 @@
 
   import PositionList from './position-list.svelte';
   import { POSITIONS } from './data';
+
+  function expandAll() {
+    const positions = document.querySelectorAll('.position');
+    positions.forEach((el) => (el.setAttribute('open', 'true')));
+  }
 </script>
 
 <Spacing --min="175px" --med="200px" --max="200px" />
@@ -22,8 +27,8 @@
     Last updated January 18th, 2023
     <br />
     <br />
-    <span class="apply-btn">
-      <Button link="/s23apply" text="Apply now!" />
+    <span class="center-btn" on:click={expandAll} on:keypress={expandAll}>
+      <Button text="Expand all!" />
     </span>
   </p>
 </Block>
@@ -36,6 +41,12 @@
 
 <Spacing --med="64px" />
 
+<span class="center-btn">
+  <Button link="/s23apply" text="Apply now!" />
+</span>
+
+<Spacing --med="64px" />
+
 <Block align={TextAlignment.LEFT}>
   <h1 id="contact-information" slot="headline" class="size-lg">Contact information</h1>
   <div slot="text" class="contact-text">
@@ -71,7 +82,7 @@
     margin: 0 1rem;
   }
 
-  .apply-btn {
+  .center-btn {
     display: flex;
     justify-content: center;
   }