Skip to content

Commit 0e2889a

Browse files
Mattclaude
andcommitted
Make sponsor bios collapsible with Read bio toggle
- Bios hidden by default - Click/tap "Read bio" to expand - Click "Hide bio" to collapse - Chevron animates to indicate state Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 69dee86 commit 0e2889a

1 file changed

Lines changed: 56 additions & 2 deletions

File tree

src/lib/components/SponsorCard.svelte

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313
}
1414
1515
let { sponsor }: Props = $props();
16+
let expanded = $state(false);
17+
18+
function toggleBio() {
19+
expanded = !expanded;
20+
}
1621
</script>
1722

1823
<article class="sponsor-card sponsor-card--{sponsor.tier}">
@@ -31,7 +36,31 @@
3136
<span class="sponsor-tier">{sponsor.tier}</span>
3237
</div>
3338

34-
<p class="sponsor-bio">{sponsor.bio}</p>
39+
{#if sponsor.bio}
40+
<button
41+
class="bio-toggle"
42+
onclick={toggleBio}
43+
aria-expanded={expanded}
44+
aria-controls="bio-{sponsor.id}"
45+
>
46+
{expanded ? 'Hide bio' : 'Read bio'}
47+
<svg
48+
class="chevron"
49+
class:rotated={expanded}
50+
width="16"
51+
height="16"
52+
viewBox="0 0 16 16"
53+
fill="none"
54+
aria-hidden="true"
55+
>
56+
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
57+
</svg>
58+
</button>
59+
60+
{#if expanded}
61+
<p id="bio-{sponsor.id}" class="sponsor-bio">{sponsor.bio}</p>
62+
{/if}
63+
{/if}
3564

3665
<a
3766
href={sponsor.website}
@@ -128,12 +157,37 @@
128157
color: var(--color-text-light);
129158
}
130159
160+
.bio-toggle {
161+
display: flex;
162+
align-items: center;
163+
gap: var(--space-xs);
164+
padding: var(--space-xs) 0;
165+
color: var(--color-primary);
166+
font-size: var(--text-sm);
167+
font-weight: 500;
168+
margin-bottom: var(--space-sm);
169+
}
170+
171+
.bio-toggle:hover,
172+
.bio-toggle:focus-visible {
173+
text-decoration: underline;
174+
}
175+
176+
.chevron {
177+
transition: transform var(--transition-fast);
178+
}
179+
180+
.chevron.rotated {
181+
transform: rotate(180deg);
182+
}
183+
131184
.sponsor-bio {
132-
flex: 1;
133185
font-size: var(--text-sm);
134186
line-height: 1.6;
135187
color: var(--color-gray-600);
136188
margin-bottom: var(--space-md);
189+
padding-top: var(--space-sm);
190+
border-top: 1px solid var(--color-gray-200);
137191
}
138192
139193
.sponsor-link {

0 commit comments

Comments
 (0)