diff --git a/wowchemy/assets/scss/wowchemy/_shortcodes.scss b/wowchemy/assets/scss/wowchemy/_shortcodes.scss
index 47cb1612..8bb59e43 100644
--- a/wowchemy/assets/scss/wowchemy/_shortcodes.scss
+++ b/wowchemy/assets/scss/wowchemy/_shortcodes.scss
@@ -21,3 +21,14 @@
   margin-left: var(--button-group-margin);
   margin-right: var(--button-group-margin);
 }
+
+// Spoilers (toggle lists)
+
+details {
+  margin-bottom: 1rem;
+}
+
+summary:focus {
+  // Override Webkit setting an outline.
+  outline: none;
+}
diff --git a/wowchemy/layouts/shortcodes/spoiler.html b/wowchemy/layouts/shortcodes/spoiler.html
index 6d617ed9..6559cbb0 100644
--- a/wowchemy/layouts/shortcodes/spoiler.html
+++ b/wowchemy/layouts/shortcodes/spoiler.html
@@ -1,13 +1,6 @@
 {{- $id := printf "spoiler-%d" .Ordinal -}}
-<div class="spoiler {{ .Get "class" }}" {{ with .Get "style" }}style="{{ . | safeCSS }}"{{ end }}>
-  <p>
-    <a class="btn btn-primary" data-toggle="collapse" href="#{{$id}}" role="button" aria-expanded="false" aria-controls="{{$id}}">
-      {{ .Get "text" | emojify }}
-    </a>
-  </p>
-  <div class="collapse card {{ if (eq (.Get "open") "true") }}show{{ end }}" id="{{$id}}">
-    <div class="card-body">
-      {{ .Inner | markdownify | emojify }}
-    </div>
-  </div>
-</div>
\ No newline at end of file
+
+<details class="spoiler {{ .Get "class" }}" {{ with .Get "style" }}style="{{ . | safeCSS }}"{{ end }} id="{{$id}}">
+  <summary>{{ .Get "text" | markdownify | emojify }}</summary>
+  <p>{{ .Inner | markdownify | emojify }}</p>
+</details>
\ No newline at end of file