diff --git a/assets/js/callouts.js b/assets/js/callouts.js
new file mode 100644
index 000000000..080bbb489
--- /dev/null
+++ b/assets/js/callouts.js
@@ -0,0 +1,6 @@
+const addCollapsibleCallouts = () => {
+    const collapsibleCallouts = document.querySelectorAll("blockquote.callout-collapsible");
+    collapsibleCallouts.forEach(el => el.addEventListener('click', event => {
+        event.currentTarget.classList.toggle("callout-collapsed");
+    }));
+}
diff --git a/assets/styles/callouts.scss b/assets/styles/callouts.scss
index 22079f4b8..98d3cd5cd 100644
--- a/assets/styles/callouts.scss
+++ b/assets/styles/callouts.scss
@@ -52,7 +52,18 @@
     --callout-warning-accent: #7f4800 !important;
 }
 
-blockquote[class$="-callout"] {
+blockquote.callout-collapsible {
+    cursor: pointer;
+}
+blockquote.callout-collapsed {
+    border-bottom-right-radius: 5px !important;
+    padding-bottom: 0 !important;
+}
+blockquote.callout-collapsed > p:not(:first-child) {
+    display: none !important;
+}
+
+blockquote[class*="-callout"] {
     margin-right: 0;
     border-radius: 5px;
     position: relative;
@@ -61,14 +72,14 @@ blockquote[class$="-callout"] {
     color: var(--dark);
     background-color: var(--outlinegray);
 }
-blockquote[class$="-callout"] > p {
+blockquote[class*="-callout"] > p {
     border-top-right-radius: 5px;
     padding-left: 1em;
     padding-right: 1em;
     color: var(--dark);
     background-color: var(--outlinegray);
 }
-blockquote[class$="-callout"] > p:first-child::after {
+blockquote[class*="-callout"] > p:first-child::after {
     display: inline-block;
     height: 24px;
     width: 18px;
@@ -77,10 +88,11 @@ blockquote[class$="-callout"] > p:first-child::after {
     left: 6px;
     top: 0;
 }
-blockquote[class$="-callout"] > p:first-child {
+blockquote[class*="-callout"] > p:first-child {
     font-size: 125%;
     font-weight: bold;
     padding-left: 30px;
+    border-bottom-right-radius: 5px;
 }
 
 blockquote.abstract-callout,
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 3f0566855..d54fef964 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -24,15 +24,15 @@
 
   <!-- CSS Stylesheets and Fonts -->
   {{$sass := resources.Match "styles/[!_]*.scss" }}
+  {{ if (not $.Site.Data.config.enableCallouts) }}
+  {{ $calloutsCss := resources.Get "styles/callouts.scss" }}
+  {{$sass = $sass | symdiff (slice $calloutsCss)}}
+  {{end}}
   {{$css := slice }}
   {{range $sass}}
   {{$scss := . | resources.ToCSS (dict "outputStyle" "compressed") }}
   {{$css = $css | append $scss}}
   {{end}}
-  {{ if $.Site.Data.config.enableCallouts }}
-  {{ $calloutsCss := resources.Get "styles/callouts.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
-  {{$css = $css | append $calloutsCss}}
-  {{end}}
   {{$finalCss := $css | resources.Concat "styles.css" | resources.Fingerprint "md5" | resources.Minify  }}
   <link href="{{$finalCss.Permalink}}" rel="stylesheet" />
 
@@ -62,6 +62,11 @@
   <script src="{{$clipboard.Permalink}}"></script>
   {{ end }}
 
+  {{ if $.Site.Data.config.enableCallouts }}
+  {{ $callouts := resources.Get "js/callouts.js" | resources.Fingerprint "md5" | resources.Minify }}
+  <script src="{{$callouts.Permalink}}"></script>
+  {{ end }}
+
   <!--  Preload page vars  -->
   {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint
   "md5" | resources.Minify | }} {{$contentIndex := resources.Get
@@ -101,6 +106,10 @@
       addTitleToCodeBlocks();
       {{ end }}
 
+      {{if $.Site.Data.config.enableCallouts -}}
+      addCollapsibleCallouts();
+      {{ end }}
+
       {{if $.Site.Data.config.enableFooter}}
       const container = document.getElementById("graph-container")
       // retry if the graph is not ready
diff --git a/layouts/partials/textprocessing.html b/layouts/partials/textprocessing.html
index 92477d442..f6e89f7eb 100644
--- a/layouts/partials/textprocessing.html
+++ b/layouts/partials/textprocessing.html
@@ -68,8 +68,14 @@
     {{ $finder = index $blockquoteclasses1 $counter }}
     {{ if (in $finder "[!") }}
       {{ $inner := index $blockquoteclasses $counter1 }}
-      {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `${1}` }}
-      {{ $inner = printf "blockquote class=%s-callout" $inner}}
+      {{ if (in $finder "]-") }}
+        {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `callout-collapsible callout-collapsed ${1}`}}
+      {{ else if (in $finder "]+") }}
+        {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `callout-collapsible ${1}`}}
+      {{ else}}
+        {{ $inner = $inner | replaceRE `\[!([a-zA-Z]+)\]` `${1}` }}
+      {{ end }}
+      {{ $inner = printf "blockquote class=\"%s-callout\"" $inner}}
       {{ $content = replace $content . $inner 1}}
       {{ $counter1 = add $counter1 1 }}
     {{ else }}