diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
index e974a10..ab981cd 100644
--- a/src/routes/posts/[slug]/+page.svelte
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -88,42 +88,59 @@
 			{/if}
 
 			{#if data.series && data.seriesPosts.length > 0}
-				<section class="series-navigation" aria-labelledby="series-navigation-title">
-					<h2 id="series-navigation-title">
-						{$page.data.aliases?.series || '系列'}：<a
-							href={resolve('/series/[slug]', { slug: data.series.slug })}>{data.series.name}</a
+				<details class="series-navigation" open>
+					<summary class="series-title" id="series-navigation-title">
+						<span
+							>{$page.data.aliases?.series || '系列'} -
+							<a href={resolve('/series/[slug]', { slug: data.series.slug })}>{data.series.name}</a
+							></span
 						>
-					</h2>
-					<ol>
-						{#each data.seriesPosts as seriesPost (seriesPost.id)}
-							<li class:current={seriesPost.id === data.post.id}>
-								{#if seriesPost.id === data.post.id}
-									<span aria-current="page">{seriesPost.title}</span>
-								{:else}
-									<a href={resolve('/posts/[slug]', { slug: seriesPost.slug })}
-										>{seriesPost.title}</a
+						<svg
+							class="details-icon"
+							aria-hidden="true"
+							focusable="false"
+							role="img"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 256 512"
+							width="12"
+							height="12"
+							><path
+								fill="currentColor"
+								d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+							></path></svg
+						>
+					</summary>
+					<div class="series-content">
+						<ol>
+							{#each data.seriesPosts as seriesPost (seriesPost.id)}
+								<li class:current={seriesPost.id === data.post.id}>
+									{#if seriesPost.id === data.post.id}
+										<span aria-current="page">{seriesPost.title}</span>
+									{:else}
+										<a href={resolve('/posts/[slug]', { slug: seriesPost.slug })}
+											>{seriesPost.title}</a
+										>
+									{/if}
+								</li>
+							{/each}
+						</ol>
+						{#if previousSeriesPost || nextSeriesPost}
+							<nav class="series-prev-next" aria-label="系列文章翻页">
+								{#if previousSeriesPost}
+									<a href={resolve('/posts/[slug]', { slug: previousSeriesPost.slug })}
+										>← {previousSeriesPost.title}</a
+									>
+								{:else}<span></span>{/if}
+								{#if nextSeriesPost}
+									<a href={resolve('/posts/[slug]', { slug: nextSeriesPost.slug })}
+										>{nextSeriesPost.title} →</a
 									>
 								{/if}
-							</li>
-						{/each}
-					</ol>
-					{#if previousSeriesPost || nextSeriesPost}
-						<nav class="series-prev-next" aria-label="系列文章翻页">
-							{#if previousSeriesPost}
-								<a href={resolve('/posts/[slug]', { slug: previousSeriesPost.slug })}
-									>← {previousSeriesPost.title}</a
-								>
-							{:else}<span></span>{/if}
-							{#if nextSeriesPost}
-								<a href={resolve('/posts/[slug]', { slug: nextSeriesPost.slug })}
-									>{nextSeriesPost.title} →</a
-								>
-							{/if}
-						</nav>
-					{/if}
-				</section>
+							</nav>
+						{/if}
+					</div>
+				</details>
 			{/if}
-
 			<MarkdownRenderer content={data.post.content} />
 
 			{#if data.tags && data.tags.length > 0}
@@ -169,39 +186,71 @@
 
 <style>
 	.series-navigation {
-		margin: 0 0 2rem;
-		padding: 1.25rem 1.5rem;
-		border: 2px solid var(--text-color);
-		background: rgba(0, 0, 0, 0.015);
+		margin: 1.5rem 0;
+		border-radius: 4px;
+		overflow: hidden;
+		border: 1px solid var(--border-color);
 	}
 
-	.series-navigation h2 {
-		margin: 0 0 1rem;
-		padding: 0;
-		border: 0;
-		font-size: 1.15rem;
+	.series-navigation .series-title {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.75rem 1rem;
+		background: rgba(0, 0, 0, 0.05);
+		font-weight: 600;
+		cursor: pointer;
+		list-style: none;
+		user-select: none;
 	}
 
-	.series-navigation h2 a,
+	.series-navigation .series-title::-webkit-details-marker {
+		display: none;
+	}
+
+	.series-navigation .details-icon {
+		transition: transform 0.3s;
+	}
+
+	.series-navigation[open] .details-icon {
+		transform: rotate(90deg);
+	}
+
+	.series-navigation .series-title a,
 	.series-navigation li a,
 	.series-prev-next a {
 		color: var(--text-color);
 		text-decoration: none;
 	}
 
-	.series-navigation h2 a:hover,
+	.series-navigation .series-title a:hover,
 	.series-navigation li a:hover,
 	.series-prev-next a:hover {
 		color: var(--accent-color, #419b38);
 	}
 
+	.series-navigation .series-content {
+		padding: 1rem;
+		background: rgba(0, 0, 0, 0.015);
+	}
+
 	.series-navigation ol {
 		margin: 0;
-		padding-left: 1.6rem;
+		padding: 0 0 0 1.5rem;
+		list-style-type: none;
 	}
 
 	.series-navigation li {
-		padding: 0.25rem 0;
+		padding: 0.35rem 0;
+		position: relative;
+	}
+
+	.series-navigation li::before {
+		content: '|';
+		position: absolute;
+		left: -1rem;
+		color: var(--border-color);
+		font-weight: bold;
 	}
 
 	.series-navigation li.current {
@@ -209,13 +258,18 @@
 		color: var(--accent-color, #419b38);
 	}
 
+	.series-navigation li.current::before {
+		color: var(--accent-color, #419b38);
+	}
+
 	.series-prev-next {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		gap: 1rem;
 		margin-top: 1rem;
 		padding-top: 1rem;
-		border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
+		border-top: 1px dashed var(--border-color, rgba(0, 0, 0, 0.12));
+		font-size: 0.9em;
 	}
 
 	.series-prev-next a:last-child {