diff --git a/docs/guide/js/index.js b/docs/guide/js/index.js
index dacc81e0..6d937975 100644
--- a/docs/guide/js/index.js
+++ b/docs/guide/js/index.js
@@ -59,4 +59,39 @@
     context: '.col-md-9'
   });
 
+  // Add View Code toggle button for each example
+  $('.guide-example').each(function() {
+
+    var btn = '' +
+      '<div>' +
+      '<hr class="divider-lg"/>' +
+      '<div class="btn-toolbar">' +
+      '<button class="btn btn-ghost btn-sm" data-toggle="code">' +
+      'View Code<i class="icon icon-code"></i>' +
+      '</button>' +
+      '</div>' +
+      '</div>';
+
+    if ($(this).next().is('.language-markup')) {
+      $(this).append($(btn));
+    }
+  });
+
+  $('[data-toggle="code"]').click(function(e) {
+
+    e.preventDefault();
+
+    var target = $(this).parents('.guide-example').next('.language-markup');
+
+    if(target.is(':visible')) {
+      target.velocity("slideUp", { duration: 200 });
+    }else {
+      target.velocity("fadeIn", {
+        duration: 300,
+        display: 'block'
+      });
+    }
+
+  });
+
 })(jQuery);
diff --git a/docs/guide/templates/partials/default-footer.hbs b/docs/guide/templates/partials/default-footer.hbs
index 56b9399e..f532bccd 100644
--- a/docs/guide/templates/partials/default-footer.hbs
+++ b/docs/guide/templates/partials/default-footer.hbs
@@ -1,6 +1,7 @@
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tocify/1.9.0/javascripts/jquery.tocify.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-sanitize.js"></script>
 
diff --git a/lib/ui/mask/docs/mask-ui-demo.html b/lib/ui/mask/docs/mask-ui-demo.html
index 09e4a8ea..fd7d6742 100644
--- a/lib/ui/mask/docs/mask-ui-demo.html
+++ b/lib/ui/mask/docs/mask-ui-demo.html
@@ -68,43 +68,42 @@
       </div>
     </form>
   </div>
- </div>
 
 <code class="language-markup">
-  <div class="guide-example">
-    <form name="datepickerForm">
-      <div class="form-group">
-        <label for="date">Date</label>
-        <input type="text"
-           name="date"
-           class="form-control"
-           data-av-mask="date"
-          />
-      </div>
-      <div class="form-group">
-        <label for="phone">Phone</label>
-        <input type="text"
-           name="phone"
-           class="form-control"
-           data-av-mask="phone"
-          />
-      </div>
-      <div class="form-group">
-        <label for="SSN">SSN</label>
-        <input type="text"
-           name="SSN"
-           class="form-control"
-           data-av-mask="SSN"
-          />
-      </div>
-      <div class="form-group">
-        <label for="A">aa9a*</label>
-        <input type="text"
-           name="SSN"
-           class="form-control"
-           data-av-mask="aa9a*"
-          />
-      </div>
-    </form>
-  </div>
+  <form name="datepickerForm">
+    <div class="form-group">
+      <label for="date">Date</label>
+      <input type="text"
+             name="date"
+             class="form-control"
+             data-av-mask="date"
+        />
+    </div>
+    <div class="form-group">
+      <label for="phone">Phone</label>
+      <input type="text"
+             name="phone"
+             class="form-control"
+             data-av-mask="phone"
+        />
+    </div>
+    <div class="form-group">
+      <label for="SSN">SSN</label>
+      <input type="text"
+             name="SSN"
+             class="form-control"
+             data-av-mask="SSN"
+        />
+    </div>
+    <div class="form-group">
+      <label for="A">aa9a*</label>
+      <input type="text"
+             name="SSN"
+             class="form-control"
+             data-av-mask="aa9a*"
+        />
+    </div>
+  </form>
 </code>
+
+ </div>