diff --git a/dist/image-sequencer-ui.js b/dist/image-sequencer-ui.js
index 468e6006..e625b0d4 100644
--- a/dist/image-sequencer-ui.js
+++ b/dist/image-sequencer-ui.js
@@ -388,15 +388,15 @@ function DefaultHtmlStepUi(_sequencer, options) {
     <h3>\
     <span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
     '<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
-    '</h3><div class="cal"><p><i>"'+
+    '</h3><div class="cal collapse in"><p><i>"'+
       (step.description || "") +
       '</i></p></div>\
     </div>\
     </form>\
-    <div class="col-md-8 cal step-column">\
+    <div class="col-md-8 cal collapse in step-column">\
       <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
       <div class="step-image">\
-        <a><img alt="" class="img-thumbnail step-thumbnail"/></a>\
+        <a class="cal collapse in"><img alt="" class="img-thumbnail step-thumbnail"/></a>\
       </div>\
     </div>\
     </div>\
@@ -404,7 +404,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
     </div>';
 
     var tools =
-    '<div class="cal"><div class="tools btn-group">\
+    '<div class="cal collapse in"><div class="tools btn-group">\
     <button confirm="Are you sure?" class="remove btn btn btn-default">\
       <i class="fa fa-trash"></i>\
     </button>\
@@ -469,7 +469,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
         div.setAttribute("name", paramName);
         var description = inputs[paramName].desc || paramName;
         div.innerHTML =
-          "<div class='det cal'>\
+          "<div class='det cal collapse in'>\
                            <label for='" +
           paramName +
           "'>" +
@@ -483,7 +483,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       }
 
       $(step.ui.querySelector("div.details")).append(
-        '<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
+        '<div class="cal collapse in"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
       );
 
       
@@ -513,7 +513,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
     }
     $(step.ui.querySelector(".toggle")).on("click", () => {
       $(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
-      $(step.ui.querySelectorAll(".cal")).toggleClass("collapse");
+      $(step.ui.querySelectorAll(".cal")).collapse('toggle');
     });
     
     $(step.imgElement).on("mousemove", _.debounce(() => imageHover(step), 150));
diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index 94560566..0aa81e25 100644
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -32,21 +32,23 @@ function DefaultHtmlStepUi(_sequencer, options) {
     <h3>\
     <span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
     '<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
-    '</h3><div class="cal"><p><i>"'+
+    '</h3><div class="cal collapse in"><p><i>"'+
       (step.description || "") +
       '</i></p></div>\
     </div>\
     </form>\
-    <div class="col-md-8 cal step-column">\
+    <div class="col-md-8 cal collapse in step-column">\
       <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
-        <a><img alt="" class="img-thumbnail step-thumbnail"/></a>\
+      <div class="step-image">\
+        <a class="cal collapse in"><img alt="" class="img-thumbnail step-thumbnail"/></a>\
+      </div>\
     </div>\
     </div>\
     </div>\
     </div>';
 
     var tools =
-    '<div class="cal"><div class="tools btn-group">\
+    '<div class="cal collapse in"><div class="tools btn-group">\
     <button confirm="Are you sure?" class="remove btn btn btn-default">\
       <i class="fa fa-trash"></i>\
     </button>\
@@ -111,7 +113,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
         div.setAttribute("name", paramName);
         var description = inputs[paramName].desc || paramName;
         div.innerHTML =
-          "<div class='det cal'>\
+          "<div class='det cal collapse in'>\
                            <label for='" +
           paramName +
           "'>" +
@@ -125,7 +127,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       }
 
       $(step.ui.querySelector("div.details")).append(
-        '<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
+        '<div class="cal collapse in"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
       );
 
       
@@ -155,7 +157,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
     }
     $(step.ui.querySelector(".toggle")).on("click", () => {
       $(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
-      $(step.ui.querySelectorAll(".cal")).toggleClass("collapse");
+       $(step.ui.querySelectorAll(".cal")).collapse('toggle');
     });
     
     $(step.imgElement).on("mousemove", _.debounce(() => imageHover(step), 150));