From 10ae1fcf36919371eabf9a458015c5c25aba602a Mon Sep 17 00:00:00 2001
From: zwbetz-gh <zwbetz@gmail.com>
Date: Wed, 17 Jun 2020 22:32:30 -0500
Subject: [PATCH] fix issue #36

---
 .../content/post/multiple-expandable-test.md  | 19 +++++++++++++++++++
 .../content/post/special-character-test.md    |  2 +-
 layouts/shortcodes/expandable.html            |  9 +++++++--
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 exampleSite/content/post/multiple-expandable-test.md

diff --git a/exampleSite/content/post/multiple-expandable-test.md b/exampleSite/content/post/multiple-expandable-test.md
new file mode 100644
index 0000000..ad12612
--- /dev/null
+++ b/exampleSite/content/post/multiple-expandable-test.md
@@ -0,0 +1,19 @@
+---
+title: "Multiple Expandable Test"
+date: 2020-06-17T22:01:14-05:00
+tags: [issue]
+---
+
+Testing out GitHub issue https://github.com/zwbetz-gh/cupper-hugo-theme/issues/36 -- Multiple expandable shortcodes do not work if they have the same inner text.
+
+{{< expandable label="expandable 1" level="2" >}}
+Same inner text.
+{{< /expandable >}}
+
+{{< expandable label="expandable 2" level="2" >}}
+Same inner text.
+{{< /expandable >}}
+
+{{< expandable label="expandable 3" level="2" >}}
+Different inner text.
+{{< /expandable >}}
diff --git a/exampleSite/content/post/special-character-test.md b/exampleSite/content/post/special-character-test.md
index 5c5a81a..86b4ed1 100644
--- a/exampleSite/content/post/special-character-test.md
+++ b/exampleSite/content/post/special-character-test.md
@@ -1,7 +1,7 @@
 ---
 title: "Special Character Test"
 date: 2019-09-10T20:26:08-05:00
-tags: []
+tags: [issue]
 ---
 
 Testing out GitHub issue https://github.com/zwbetz-gh/cupper-hugo-theme/issues/16
diff --git a/layouts/shortcodes/expandable.html b/layouts/shortcodes/expandable.html
index b1eee0c..5b752a9 100644
--- a/layouts/shortcodes/expandable.html
+++ b/layouts/shortcodes/expandable.html
@@ -2,7 +2,12 @@
   {{ if .Get "level" }}
     <h{{ .Get "level" }}>
   {{ end }}
-    <button aria-expanded="{{ with .Get "open" }}true{{ else }}false{{ end }}" data-expands="js-expandable-{{ .Inner | md5 }}">
+    {{/* 1. Get the md5 hash of the expandable inner text */}}
+    {{/* 2. Split the hash string into an array */}}
+    {{/* 3. Shuffle the array */}}
+    {{/* 4. Convert the array back into a string */}}
+    {{ $random := delimit (shuffle (split (md5 .Inner) "" )) "" }}
+    <button aria-expanded="{{ with .Get "open" }}true{{ else }}false{{ end }}" data-expands="js-expandable-{{ $random }}">
       <span class="expandable-label">{{ .Get "label" | default "More info" }}</span>
       <svg aria-hidden="true" focusable="false" viewBox="0 0 70.866142 70.866141">
         <g transform="translate(0 -981.5)">
@@ -14,7 +19,7 @@
   {{ if .Get "level" }}
     </h{{ .Get "level"}}>
   {{ end }}
-  <div id="js-expandable-{{ .Inner | md5 }}" {{ with .Get "open" | not }}hidden{{ end }}>
+  <div id="js-expandable-{{ $random }}" {{ with .Get "open" | not }}hidden{{ end }}>
     {{ .Inner | markdownify }}
   </div>
 </div>