--- a/web/index.html	Fri Oct 25 18:40:46 2013 +0200
+++ b/web/index.html	Fri Oct 25 18:41:40 2013 +0200
@@ -333,22 +333,28 @@
           $("#titles").hide();
           $("#userguide").hide();
       });
-      $("#tabmat").click(function(e){
-          if($("#titles").css("display")=="none"){
-        	  $("#titles").show();
+
+      var mouseup_handler = function(selector, e) {
+          var container = $(selector);          
+          if (!container.is(e.target) // if the target of the click isn't the container...
+              && container.has(e.target).length === 0) {// ... nor a descendant of the container
+              container.hide();
           }
-          else{
-        	  $("#titles").hide();
-          }
+      }
+
+      var mouseup_titles = mouseup_handler.curry("#titles");
+      var mouseup_userguide = mouseup_handler.curry("#userguide");
+      
+      $("#tabmat").click(function(e){
+          $("#titles").toggle();
       });
+      $(document).mouseup(mouseup_titles);
+
       $("#ugbtn").click(function(e){
-          if($("#userguide").css("display")=="none"){
-              $("#userguide").show();
-          }
-          else{
-              $("#userguide").hide();
-          }
+          $("#userguide").toggle();
       });
+      $(document).mouseup(mouseup_userguide);
+
       // load first video with get parameter
       var first = "full";
       var iframe = getURLParameter("iframe");

--- a/web/js/ds.js	Fri Oct 25 18:40:46 2013 +0200
+++ b/web/js/ds.js	Fri Oct 25 18:41:40 2013 +0200
@@ -29,3 +29,11 @@
   "7r" : "9f58e02e-3b1f-11e3-a863-00145ea4a2be",
   "full" : "90be1ecc-363c-11e3-98be-00145ea4a2be",
 };
+
+Function.prototype.curry = function() {
+    var fn = this, args = Array.prototype.slice.call(arguments);
+    return function() {
+      return fn.apply(this, args.concat(
+        Array.prototype.slice.call(arguments)));
+    };
+  };