diff --git a/ko-cart/index.html b/ko-cart/index.html
index 3474230..a98d712 100644
--- a/ko-cart/index.html
+++ b/ko-cart/index.html
@@ -27,6 +27,7 @@
         <script type="text/javascript" src="js/vendors/bootstrap.js"></script>
         <script type="text/javascript" src="js/vendors/knockout-3.2.0.js"></script>
         <script type="text/javascript" src="js/vendors/koExternalTemplateEngine_all.js"></script>
+        <script type="text/javascript" src="js/custom/koBindings.js"></script>
         <!-- app -->
         <script type="text/javascript" src="js/models/Product.js"></script>
         <script type="text/javascript" src="js/models/CartProduct.js"></script>
diff --git a/ko-cart/js/custom/koBindings.js b/ko-cart/js/custom/koBindings.js
new file mode 100644
index 0000000..4539768
--- /dev/null
+++ b/ko-cart/js/custom/koBindings.js
@@ -0,0 +1,10 @@
+ko.bindingHandlers.toggle = {
+    init: function (element, valueAccessor) {
+        var value = valueAccessor();
+        ko.applyBindingsToNode(element, {
+            click: function() {
+                value(!value());
+            }
+        });
+    }
+};
\ No newline at end of file
diff --git a/ko-cart/views/header.html b/ko-cart/views/header.html
index cab4da7..b0c1556 100644
--- a/ko-cart/views/header.html
+++ b/ko-cart/views/header.html
@@ -9,7 +9,7 @@
     </button>
     <button
         class="btn btn-primary btn-sm"
-        data-bind="click: showCartDetails, css:{ disabled: cart().length  < 1}"
+        data-bind="toggle:visibleCart, css:{ disabled: cart().length  < 1}"
     >
         Show Cart Details
     </button>