refactor: use bootstrap's collapse functionality

they do it better than me I guess

src/scss/markdown-callouts.scss

@@ -46,12 +46,6 @@ $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;
@@ -60,11 +54,6 @@ $callout-fg-grey: #9e9e9e;
       .callout-fold svg {
         transform: rotate(0deg);
       }
-
-      .callout-content {
-        opacity: 0;
-        max-height: 0;
-      }
     }
   }
 
@@ -109,10 +98,10 @@ $callout-fg-grey: #9e9e9e;
   }
 
   &[data-callout="important"] {
-    background-color: $callout-bg-orange;
+    background-color: $callout-bg-cyan;
 
     .callout-title {
-      color: $callout-fg-orange;
+      color: $callout-fg-cyan;
     }
   }
 
@@ -125,10 +114,10 @@ $callout-fg-grey: #9e9e9e;
   }
 
   &[data-callout="question"] {
-    background-color: $callout-bg-cyan;
+    background-color: $callout-bg-orange;
 
     .callout-title {
-      color: $callout-fg-cyan;
+      color: $callout-fg-orange;
     }
   }
 

src/ts/Callout.ts

@@ -1,3 +1,5 @@
+declare const bootstrap: any;
+
 class Callout {
     private readonly _callout: HTMLElement;
     private readonly _title: HTMLElement;
@@ -45,6 +47,7 @@ class Callout {
         }
 
         const callout: HTMLElement = this._callout;
+        const content: HTMLElement = this._content;
 
         if (callout === null) {
             console.error("Callout element for ", this, " is null!");
@@ -52,8 +55,13 @@ 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;