Merge pull request #2764 from alxhslm/accordian

✨ Feat: Add accordian shortcode

layouts/shortcodes/accordion.html

@@ -0,0 +1,46 @@
+{{ $id := delimit (slice "accordion" (partial "functions/uid.html" .)) "-" }}
+{{ $mode := .Get "mode" | default "collapse" }}
+{{ $separated := .Get "separated" | default false }}
+{{ $isSeparated := or (eq $separated true) (eq $separated "true") }}
+
+<div
+  id="{{ $id }}"
+  class="{{ if $isSeparated }}space-y-2{{ else }}border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden{{ end }}"
+  data-accordion="{{ $mode }}"
+  data-accordion-separated="{{ $isSeparated }}"
+>
+  {{- .Inner -}}
+</div>
+{{ if $isSeparated }}
+<style>
+  #{{ $id }} > details + details {
+    margin-top: 0.5rem;
+  }
+</style>
+{{ else }}
+<style>
+  #{{ $id }} > details + details {
+    border-top: 1px solid rgb(var(--color-neutral-200));
+  }
+  .dark #{{ $id }} > details + details {
+    border-top-color: rgb(var(--color-neutral-700));
+  }
+</style>
+{{ end }}
+{{ 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 }}

layouts/shortcodes/accordionItem.html

@@ -0,0 +1,31 @@
+{{ $parent := .Parent }}
+{{ $separated := false }}
+{{ if $parent }}
+  {{ $separated = $parent.Get "separated" | default false }}
+{{ end }}
+{{ $isSeparated := or (eq $separated true) (eq $separated "true") }}
+
+{{ $title := .Get "title" | default (.Get "header") }}
+{{ $md := .Get "md" | default true }}
+{{ $open := .Get "open" | default false }}
+{{ $isOpen := or (eq $open true) (eq $open "true") }}
+
+<details
+  class="{{ if $isSeparated }}rounded-lg border border-neutral-200 dark:border-neutral-700 overflow-hidden{{ else }}border-none{{ end }}"
+  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>
+      {{ partial "icon" "chevron-down" }}
+    </span>
+  </summary>
+  <div class="px-4 pb-4 text-neutral-700 dark:text-neutral-300">
+    {{ if $md }}
+      {{- .Inner | markdownify -}}
+    {{ else }}
+      {{- .Inner -}}
+    {{ end }}
+  </div>
+</details>