src/scss/markdown-callouts.scss

@@ -46,6 +46,12 @@ $callout-fg-grey: #9e9e9e;
       transition: margin-bottom 500ms;
     }
 
+    .callout-content {
+      opacity: 1;
+      max-height: 500px;
+      transition: opacity 500ms, max-height 500ms;
+    }
+
     &.collapsed {
       .callout-title {
         margin-bottom: 0;
@@ -54,6 +60,11 @@ $callout-fg-grey: #9e9e9e;
       .callout-fold svg {
         transform: rotate(0deg);
       }
+
+      .callout-content {
+        opacity: 0;
+        max-height: 0;
+      }
     }
   }
 
@@ -98,10 +109,10 @@ $callout-fg-grey: #9e9e9e;
   }
 
   &[data-callout="important"] {
-    background-color: $callout-bg-cyan;
+    background-color: $callout-bg-orange;
 
     .callout-title {
-      color: $callout-fg-cyan;
+      color: $callout-fg-orange;
     }
   }
 
@@ -114,10 +125,10 @@ $callout-fg-grey: #9e9e9e;
   }
 
   &[data-callout="question"] {
-    background-color: $callout-bg-orange;
+    background-color: $callout-bg-cyan;
 
     .callout-title {
-      color: $callout-fg-orange;
+      color: $callout-fg-cyan;
     }
   }
 

src/ts/Callout.ts

@@ -1,5 +1,3 @@
-declare const bootstrap: any;
-
 class Callout {
     private readonly _callout: HTMLElement;
     private readonly _title: HTMLElement;
@@ -47,7 +45,6 @@ class Callout {
         }
 
         const callout: HTMLElement = this._callout;
-        const content: HTMLElement = this._content;
 
         if (callout === null) {
             console.error("Callout element for ", this, " is null!");
@@ -55,13 +52,8 @@ class Callout {
         }
 
         callout.classList.add("collapsible", "collapsed");
-        content.classList.add("collapse");
-        const bsCollapse = new bootstrap.Collapse(content, {toggle: false});
-
         this._title.addEventListener("click", () => {
             callout.classList.toggle("collapsed");
-
-            bsCollapse.toggle();
         });
 
         this._foldEnabled = true;