diff --git a/examples/demo.css b/examples/demo.css
index 87fe7c98..4d0c40af 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -252,6 +252,15 @@ a.name-header{
 .trash-container button.btn-xs {
   margin-top: -5px !important;
 }
+
+.toggleIcon {
+  transition: transform 0.2s;
+}
+
+.rotated {
+  transform: rotate(180deg);
+}
+
 #gif{
   margin-left:0px;
   margin-top:5px;
diff --git a/examples/demo.js b/examples/demo.js
index f8365e8e..dde13b1e 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -197,8 +197,8 @@ window.onload = function() {
         step.options.step.imgElement.src = reader.result;
       else
         step.imgElement.src = reader.result;
-      insertPreview.updatePreviews(reader.result,'addStep');
-      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'insertStep');
+      insertPreview.updatePreviews(reader.result,'#addStep');
+      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
     },
     onTakePhoto: function (url) {
       var step = sequencer.steps[0];
@@ -208,16 +208,16 @@ window.onload = function() {
         step.options.step.imgElement.src = url;
       else
         step.imgElement.src = url;
-      insertPreview.updatePreviews(url,'addStep');
-      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'insertStep');
+      insertPreview.updatePreviews(url,'#addStep');
+      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
     }
   });
 
   setupCache();
 
   if (urlHash.getUrlHashParameter('src')) {
-    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'addStep');
+    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'#addStep');
   } else {
-    insertPreview.updatePreviews("images/tulips.png",'addStep');
+    insertPreview.updatePreviews("images/tulips.png",'#addStep');
   }
 };
\ No newline at end of file
diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index d6b8a580..04a1e55e 100644
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -31,7 +31,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
             <div class="panel-heading">\
               <div class="trash-container pull-right"></div>\
               <h3 class="panel-title">' +  
-                '<span class="toggle">' +step.name + ' <span class="caret"></span>\
+                '<span class="toggle">' +step.name + ' <span class="caret toggleIcon rotated"></span>\
                  <span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
               </h3>\
             </div>\
@@ -134,8 +134,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
       );
       $(step.ui.querySelector("div.panel-footer")).prepend(
         '<button class="pull-right btn btn-default btn-sm insert-step" >\
-      <i class="fa fa-plus"></i> Insert Step\
-      </button>'
+          <span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span>\
+        </button>'
       );  
     }
 
@@ -161,7 +161,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $("#load-image").append(step.ui);
     }
     $(step.ui.querySelector(".toggle")).on("click", () => {
-      $(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
+      $(step.ui.querySelector('.toggleIcon')).toggleClass('rotated');
        $(step.ui.querySelectorAll(".cal")).collapse('toggle');
     });
     
diff --git a/examples/lib/insertPreview.js b/examples/lib/insertPreview.js
index 5caed370..afb40a6f 100644
--- a/examples/lib/insertPreview.js
+++ b/examples/lib/insertPreview.js
@@ -8,7 +8,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
       img.src = src;
       $(img).css("max-width", "200%");
       $(img).css("transform", "translateX(-20%)");
-      var stepDiv = $('#'+selector+' .row').find('div').each(function() {
+      $(selector + ' .radio-group').find('div').each(function() {
         if ($(this).find('div').attr('data-value') === previewStepName) {
           $(this).find('div').append(img);
         }
@@ -27,7 +27,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
   }
 
   function updatePreviews(src, selector) {
-    $('#'+selector+' img').remove();
+    $(selector+' img').remove();
 
     var previewSequencerSteps = {
       "resize": "125%",
diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js
index a5dd5cc5..04d73668 100644
--- a/examples/lib/intermediateHtmlStepUi.js
+++ b/examples/lib/intermediateHtmlStepUi.js
@@ -3,85 +3,109 @@ var urlHash = require('./urlHash.js'),
 
 function IntermediateHtmlStepUi(_sequencer, step, options) {
   function stepUI() {
-    return '<div class="row insertDiv">\
-        <div class="col-md-6 col-md-offset-2" style="margin-top:5%">\
-        <section id="insertStep" class="panel panel-primary">\
-          <div class="form-inline">\
-            <div class="panel-body">\
-              <p class="info">Select a new module to add to your sequence.</p>\
-              <div class="row center-align radio-group">\
-              <div>\
-              <div class="radio" data-value="resize">\
-              <i class="fa fa-arrows-alt fa-4x i-over"></i>\
-            </div>\
-                <p>Resize</p>\
+    return '<div class="row insertDiv collapse">\
+          <section class="panel panel-primary .insert-step">\
+            <button class="btn btn-default close-insert-box"><i class="fa fa-times" aria-hidden="true"></i> Close</button>\
+            <div class="form-inline">\
+              <div class="panel-body">\
+                <p class="info">Select a new module to add to your sequence.</p>\
+                <div class="row center-align radio-group">\
+                  <div>\
+                    <div class="radio" data-value="resize">\
+                      <i class="fa fa-arrows-alt fa-4x i-over"></i>\
+                    </div>\
+                    <p>Resize</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="brightness">\
+                      <i class="fa fa-sun-o fa-4x i-over"></i>\
+                    </div>\
+                    <p>Brightness</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="contrast">\
+                      <i class="fa fa-adjust fa-4x i-over"></i>\
+                    </div>\
+                    <p>Contrast</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="saturation">\
+                      <i class="fa fa-tint fa-4x i-over i-small"></i>\
+                    </div>\
+                    <p>Saturation</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="rotate">\
+                      <i class="fa fa-rotate-right fa-4x i-over"></i>\
+                    </div>\
+                    <p>Rotate</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="crop">\
+                      <i class="fa fa-crop fa-4x i-over"></i>\
+                    </div>\
+                    <p>Crop</p>\
+                  </div>\
                 </div>\
-                <div>\
-                <div class="radio" data-value="brightness">\
-                <i class="fa fa-sun-o fa-4x i-over"></i>\
-              </div>\
-                  <p>Brightness</p>\
+                <div class="row center-align">\
+                  <div class="col-md-8">\
+                    <select class="insert-step-select">\
+                      <!-- The default null selection has been appended manually in demo.js\
+                      This is because the options in select are overritten when options are appended.-->\
+                    </select>\
+                  <div>\
+                  <div class="col-md-4">\
+                    <button class="btn btn-success btn-lg insert-save-btn add-step-btn" name="add">Add Step</button>\
+                  <div>\
                 </div>\
-                <div>\
-                <div class="radio" data-value="contrast">\
-                <i class="fa fa-adjust fa-4x i-over"></i>\
-              </div>\
-                  <p>Contrast</p>\
-                </div>\
-                <div>\
-                <div class="radio" data-value="saturation">\
-                <i class="fa fa-tint fa-4x i-over i-small"></i>\
-              </div>\
-                  <p>Saturation</p>\
-                </div>\
-                <div>\
-                <div class="radio" data-value="rotate">\
-                <i class="fa fa-rotate-right fa-4x i-over"></i>\
-              </div>\
-                  <p>Rotate</p>\
-                </div>\
-                <div>\
-                <div class="radio" data-value="crop">\
-                <i class="fa fa-crop fa-4x i-over"></i>\
-              </div>\
-                  <p>Crop</p>\
-                </div>\
-              </div>\
-              <div class="row center-align">\
-                <div class="col-md-8">\
-                <select class="form-control input-lg" id="selectStep">\
-                  <!-- The default null selection has been appended manually in demo.js\
-                  This is because the options in select are overritten when options are appended.-->\
-                </select>\
-                <div>\
-                <div class="col-md-4">\
-                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>\
-                <div>\
               </div>\
             </div>\
-          </div>\
-        </section>\
+          </section>\
         </div>';
   }
 
 
   function selectNewStepUi() {
-    var m = $("#insertStep select").val();
-    $("#insertStep .info").html(_sequencer.modulesInfo(m).description);
-    $("#insertStep #add-step-btn").prop("disabled", false);
+    var insertSelect = $(step.ui.querySelector('.insert-step-select'))
+    var m = insertSelect.val();
+    $(step.ui.querySelector('.insertDiv .info')).html(_sequencer.modulesInfo(m).description);
+    $(step.ui.querySelector('.insertDiv .add-step-btn')).prop("disabled", false);
   }
+    
+    
+  var toggleDiv = function(callback = function(){}){
+    $(step.ui.querySelector('.insertDiv')).collapse('toggle');
+    if ($(step.ui.querySelector('.insert-text')).css('display') != "none"){
+      $(step.ui.querySelector('.insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, callback)})
+    }
+    else {
+      $(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback)})
+    }
+  }
+
   insertStep = function (id) {
     var modulesInfo = _sequencer.modulesInfo();
     var parser = new DOMParser();
     var addStepUI = stepUI();
     addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div")
-    step.ui
+
+    if ($(step.ui.querySelector('.insertDiv')).length > 0){
+      toggleDiv();
+    }
+    else {
+      step.ui
       .querySelector("div.step")
       .insertAdjacentElement('afterend',
         addStepUI
       );
-    insertPreview.updatePreviews(step.output,'insertStep');
-    var insertStepSelect = $("#insertStep select");
+      toggleDiv(function(){
+        insertPreview.updatePreviews(step.output, '.insertDiv');
+      });
+    }
+
+    $(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){})});
+    
+    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
     insertStepSelect.html("");
     // Add modules to the insertStep dropdown
     for (var m in modulesInfo) {
@@ -90,33 +114,33 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
           '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
         );
     }
-    $('#insertStep #add-step-btn').selectize({
+    insertStepSelect.selectize({
       sortField: 'text'
     });
-    $('#insertStep #add-step-btn').prop('disabled', true);
+    $(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);
 
     insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');
-    $('#insertStep .radio-group .radio').on("click", function () {
+    $(step.ui.querySelector('.insertDiv .radio-group .radio')).on("click", function () {
       $(this).parent().find('.radio').removeClass('selected');
       $(this).addClass('selected');
       newStep = $(this).attr('data-value');
-      insertStepSelect.val(newStep);
+      $(step.ui.querySelector('.insert-step-select')).val(newStep);
       selectNewStepUi();
       insert(id);
       $(this).removeClass('selected');
     });
-    $(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi);
-    $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function () { insert(id) });
+    insertStepSelect.on('change', selectNewStepUi);
+    $(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id) });
   }
 
   function insert(id) {
 
     options = options || {};
-    var insertStepSelect = $("#insertStep select");
+    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
     if (insertStepSelect.val() == "none") return;
 
     var newStepName = insertStepSelect.val()
-    $('div .insertDiv').remove();
+    toggleDiv();
     var sequenceLength = 1;
     if (sequencer.sequences[newStepName]) {
       sequenceLength = sequencer.sequences[newStepName].length;
diff --git a/package-lock.json b/package-lock.json
index 10f3e3a2..a50a4687 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -643,7 +643,7 @@
         },
         "minimist": {
           "version": "0.0.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz",
           "integrity": "sha1-16oye87PUY+RBqxrjwA/o7zqhWY=",
           "dev": true
         },
@@ -3515,7 +3515,7 @@
     },
     "gif-encoder": {
       "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/gif-encoder/-/gif-encoder-0.4.3.tgz",
+      "resolved": "http://registry.npmjs.org/gif-encoder/-/gif-encoder-0.4.3.tgz",
       "integrity": "sha1-iitP6MqJWkjjoLbLs0CgpqNXGJk=",
       "requires": {
         "readable-stream": "~1.1.9"
@@ -4306,7 +4306,7 @@
         },
         "minimist": {
           "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
           "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
           "dev": true
         },
@@ -4371,7 +4371,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
           "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
           "dev": true
         },
@@ -5263,7 +5263,7 @@
     },
     "magic-string": {
       "version": "0.22.5",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
+      "resolved": "http://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
       "integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==",
       "requires": {
         "vlq": "^0.2.2"
@@ -5602,7 +5602,7 @@
     },
     "minimist": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
     },
     "mitt": {
@@ -5643,7 +5643,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         }
@@ -6023,7 +6023,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
           "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
         }
       }
@@ -6738,7 +6738,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         },
         "object-keys": {
@@ -7305,7 +7305,7 @@
     },
     "sax": {
       "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-0.1.5.tgz",
+      "resolved": "http://registry.npmjs.org/sax/-/sax-0.1.5.tgz",
       "integrity": "sha1-0YKaYSD6AWZetNv/bEPyn9bWFHE=",
       "dev": true
     },