diff --git a/assets/scss/app.scss b/assets/scss/app.scss
index fc76d8e..b788eee 100644
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -20,6 +20,7 @@
 @import "components/alerts";
 @import "components/buttons";
 @import "components/code";
+@import "components/details";
 @import "components/syntax";
 @import "components/comments";
 @import "components/forms";
diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index c312215..7608aa4 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -543,3 +543,19 @@ $navbar-dark-active-color:          $link-color-dark;
 [data-dark-mode] .dropdown-menu-main .dropdown-item.active {
   color: $link-color-dark;
 }
+
+[data-dark-mode] details {
+  border: 1px solid $border-dark;
+}
+
+[data-dark-mode] summary:hover {
+  background: $body-overlay-dark;
+}
+
+[data-dark-mode] details[open] > summary {
+  border-bottom: 1px solid $border-dark;
+}
+
+[data-dark-mode] details summary::before {
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+}
diff --git a/assets/scss/components/_details.scss b/assets/scss/components/_details.scss
new file mode 100644
index 0000000..f3877dc
--- /dev/null
+++ b/assets/scss/components/_details.scss
@@ -0,0 +1,77 @@
+details {
+  display: block;
+  border: 1px solid $gray-200;
+  border-radius: 0.25rem;
+  padding: 0.5rem 1rem 0;
+  margin: 0.5rem 0;
+}
+
+/*
+details summary {
+  &::marker {
+    content: "";
+  }
+}
+*/
+
+summary {
+  list-style: none;
+  display: inline;
+  width: calc(100% + 2rem);
+  margin: -0.5rem -1rem 0;
+  padding: 0.5rem 0.75rem;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+summary:hover {
+  background: $gray-100;
+}
+
+details summary::before {
+  display: inline-block;
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  transition: transform 0.35s ease;
+  transform-origin: center center;
+  margin-right: 0.375rem;
+}
+
+details[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+/*
+details summary > * {
+  display: inline-block;
+}
+*/
+
+details[open] {
+  padding: 0.5rem 1rem;
+}
+
+details[open] > summary {
+  border-bottom: 1px solid $gray-300;
+  margin-bottom: 0.5rem;
+}
+
+details h2,
+details h3,
+details h4 {
+  margin: 1rem 0 0.5rem;
+}
+
+details p:last-child {
+  margin-bottom: 0;
+}
+
+details ul,
+details ol {
+  margin-bottom: 0;
+}
+
+details pre {
+  margin: 0 0 1rem;
+}
diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
new file mode 100644
index 0000000..61a7183
--- /dev/null
+++ b/layouts/shortcodes/details.html
@@ -0,0 +1,4 @@
+<details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}>
+  <summary>{{ with .Get 0 -}}{{ . | safeHTML }}{{ else -}}{{ errorf "No summary provided"}}{{ end -}}</summary>
+  {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}}
+</details>
\ No newline at end of file