feat(hn): toggle comments by details > summary (#532)

sites/hn.svelte.dev/src/routes/item/[id]/Comment.svelte

@@ -9,36 +9,32 @@
 	 * }}
 	 */
 	export let comment;
-
-	let hidden = false;
 </script>
 
 {#if !comment.deleted}
-	<article class="comment" class:hidden>
-		<div
-			class="meta-bar"
-			role="button"
-			tabindex="0"
-			on:click={() => (hidden = !hidden)}
-			on:keyup={(e) => e.key === ' ' && (hidden = !hidden)}
-		>
-			<span class="meta">
-				<a href="/user/{comment.user}">{comment.user}</a>
-				{comment.time_ago}
-			</span>
-		</div>
-
-		<div class="body">
-			{@html comment.content}
-		</div>
-
-		{#if comment.comments.length > 0}
-			<ul class="children">
-				{#each comment.comments as child}
-					<li><svelte:self comment={child} /></li>
-				{/each}
-			</ul>
-		{/if}
+	<article class="comment">
+		<details open>
+			<summary>
+				<div class="meta-bar" role="button" tabindex="0">
+					<span class="meta">
+						<a href="/user/{comment.user}">{comment.user}</a>
+						{comment.time_ago}
+					</span>
+				</div>
+			</summary>
+
+			<div class="body">
+				{@html comment.content}
+			</div>
+
+			{#if comment.comments.length > 0}
+				<ul class="children">
+					{#each comment.comments as child}
+						<li><svelte:self comment={child} /></li>
+					{/each}
+				</ul>
+			{/if}
+		</details>
 	</article>
 {/if}
 
@@ -54,24 +50,28 @@
 	.meta-bar {
 		padding: 1em 0;
 		cursor: pointer;
-		background: 100% 50% no-repeat url(./fold.svg);
+		background: 100% 50% no-repeat url(./unfold.svg);
 		background-size: 1em 1em;
 	}
 
-	.hidden .meta-bar {
-		background-image: url(./unfold.svg);
+	.comment details[open] .meta-bar {
+		background-image: url(./fold.svg);
 	}
 
-	.comment .children {
-		padding: 0 0 0 1em;
-		margin: 0;
+	.comment details > summary {
+		list-style-type: none;
 	}
 
-	.hidden .body,
-	.hidden .children {
+	.comment details > summary::marker,
+	.comment details > summary::-webkit-details-marker {
 		display: none;
 	}
 
+	.comment .children {
+		padding: 0 0 0 1em;
+		margin: 0;
+	}
+
 	@media (min-width: 720px) {
 		.comment .children {
 			padding: 0 0 0 2em;