--- 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");