diff --git a/layouts/shortcodes/accordion.html b/layouts/shortcodes/accordion.html
index cf20c79a..07ef7f2c 100644
--- a/layouts/shortcodes/accordion.html
+++ b/layouts/shortcodes/accordion.html
@@ -4,3 +4,20 @@
 <div id="{{ $id }}" class="space-y-2" data-accordion="{{ $mode }}">
   {{- .Inner -}}
 </div>
+{{ if eq $mode "collapse" }}
+<script>
+  (() => {
+    const root = document.getElementById("{{ $id }}");
+    if (!root) return;
+    const items = root.querySelectorAll("details[data-accordion-item]");
+    items.forEach((item) => {
+      item.addEventListener("toggle", () => {
+        if (!item.open) return;
+        items.forEach((other) => {
+          if (other !== item) other.removeAttribute("open");
+        });
+      });
+    });
+  })();
+</script>
+{{ end }}
diff --git a/layouts/shortcodes/accordionItem.html b/layouts/shortcodes/accordionItem.html
index f4ebbbc9..4bea785c 100644
--- a/layouts/shortcodes/accordionItem.html
+++ b/layouts/shortcodes/accordionItem.html
@@ -1,37 +1,15 @@
-{{ $parent := .Parent }}
-{{ $groupID := "" }}
-{{ $mode := "collapse" }}
-{{ if $parent }}
-  {{ $groupID = delimit (slice "accordion" (partial "functions/uid.html" $parent)) "-" }}
-  {{ $mode = $parent.Get "mode" | default "collapse" }}
-{{ else }}
-  {{ $groupID = delimit (slice "accordion" (partial "functions/uid.html" .)) "-" }}
-{{ end }}
-
-{{ $id := delimit (slice "accordion-item" (partial "functions/uid.html" .)) "-" }}
 {{ $title := .Get "title" | default (.Get "header") }}
 {{ $open := .Get "open" | default false }}
 {{ $isOpen := or (eq $open true) (eq $open "true") }}
 
-<div class="rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden">
-  <input
-    id="{{ $id }}"
-    {{ if eq $mode "open" }}type="checkbox"{{ else }}type="radio" name="{{ $groupID }}"{{ end }}
-    class="peer sr-only"
-    {{ if $isOpen }}checked{{ end }}
-  />
-  <label
-    for="{{ $id }}"
-    class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-lg font-semibold text-neutral-900 dark:text-neutral-100"
-  >
+<details class="rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden" data-accordion-item {{ if $isOpen }}open{{ end }}>
+  <summary class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-lg font-semibold text-neutral-900 dark:text-neutral-100">
     <span>{{ $title }}</span>
-    <span class="transition-transform duration-200 peer-checked:rotate-180">
+    <span>
       {{ partial "icon" "chevron-down" }}
     </span>
-  </label>
-  <div class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 peer-checked:grid-rows-[1fr]">
-    <div class="overflow-hidden px-4 pb-4 text-neutral-700 dark:text-neutral-300">
-      {{- .Inner | markdownify -}}
-    </div>
+  </summary>
+  <div class="px-4 pb-4 text-neutral-700 dark:text-neutral-300">
+    {{- .Inner | markdownify -}}
   </div>
-</div>
+</details>