stag-collapsible-card component

public/css/style.css

@@ -2373,4 +2373,32 @@ table .stag-filter-highlight {
 }
 .popover-body {
     font-size: 13px;
+}
+
+/* stag-collapsible-card */
+[stag-collapsible-card] .stag-collapse-trigger {
+    padding: 0;
+    width: 22px;
+    align-self: stretch;
+    margin-right: -11px;
+    align-items: center;
+    justify-content: center;
+    display: inline-flex;
+    border-radius: 2px;
+}
+[stag-collapsible-card] .stag-collapse-trigger:hover {
+    text-decoration: none !important;
+    background: #4441;
+}
+[stag-collapsible-card] .stag-collapse-trigger i {
+    display: none;
+}
+[stag-collapsible-card][collapsed] .stag-collapse-trigger i.if-collapsed {
+    display: block;
+}
+[stag-collapsible-card]:not([collapsed]) .stag-collapse-trigger i.if-not-collapsed {
+    display: block;
+}
+[stag-collapsible-card][collapsed] .card-body {
+    display: none;
 }

public/js/stag-collapsible-card.js

@@ -0,0 +1,37 @@
+(function() {
+    function init() {
+        $('.card[stag-collapsible-card]:not([stag-collapsible-card-initialized])').each(function() {
+            let header = $(this).find('>.card-header').first();
+            if(header.length) {
+                let html = header.html();
+                let newHeader = $('<div class="d-flex align-items-center"></div>');
+                newHeader.append(html);
+
+                let collapseTrigger = $('<a href="#" class="stag-collapse-trigger ml-auto" />');
+                collapseTrigger.append('<i class="fa fa-chevron-up if-not-collapsed"/>');
+                collapseTrigger.append('<i class="fa fa-chevron-down if-collapsed"/>');
+
+                newHeader.append(collapseTrigger);
+
+                header
+                    .empty()
+                    .append(newHeader);
+            }
+            $(this).attr('stag-collapsible-card-initialized', 1);
+        });
+
+        $(document)
+            .off('click.stag-collapse-toggle', '.card[stag-collapsible-card][stag-collapsible-card-initialized] .stag-collapse-trigger')
+            .on('click.stag-collapse-toggle', '.card[stag-collapsible-card][stag-collapsible-card-initialized] .stag-collapse-trigger', function() {
+                let card = $(this).closest('.card');
+                if(card.is('[collapsed]')) {
+                    card.removeAttr('collapsed');
+                }
+                else {
+                    card.attr('collapsed', 1);
+                }
+                return false;
+            });
+    }
+    addMCInitializer('stag-collapsible-card', init);
+}).call(window);