eur-lex: turn the "(Un)Fold TOC" button into "Toggle TOC".

There was no good value for the width once folded, especially on narrower
screens. This makes the button completely hide the TOC, only leaving the
button itself.

eur-lex/eur-lex_toc.user.js

@@ -19,7 +19,7 @@ style.innerHTML = '\
   white-space: nowrap;\
 }\
 #the-toc-this-website-lacks > button {\
-  display: block;\
+  width: 100%;\
 }\
 #the-toc-this-website-lacks > div {\
   direction: ltr;\
@@ -33,12 +33,13 @@ style.innerHTML = '\
 #the-toc-this-website-lacks h1 {\
   text-align: center;\
   font-size: x-large;\
+  margin: 0.5em;\
 }\
 ';
 
 var toc = document.createElement('div');
 var toc_ltr = document.createElement('div');
-var fold_button = document.createElement('button');
+var visibility_button = document.createElement('button');
 var h1_articles = document.createElement('h1');
 var ol_articles = document.createElement('ol');
 var h1_annexes = document.createElement('h1');
@@ -87,25 +88,18 @@ for (var i = 0; i < annex_titles.snapshotLength; i++) {
   ol_annexes.appendChild(li);
 }
 
-fold_button.textContent = "(Un)Fold TOC";
+visibility_button.textContent = "Toggle TOC";
 toc.id = 'the-toc-this-website-lacks';
 
-fold_button.onclick = (function() {
-  var folded = false;
+visibility_button.onclick = (function() {
+  var visible = true;
   return function() {
-    var width = "";
-    folded = ! folded;
-    if (folded) {
-      width = "width: 16em;";
-    }
-    else {
-      width = "";
-    }
-    toc.style = width;;
+    visible = ! visible;
+    toc_ltr.style = visible ? "" : "display: none;";
   }
 })();
 
-toc_ltr.appendChild(fold_button);
+toc.appendChild(visibility_button);
 if (article_titles.snapshotLength > 0) {
   toc_ltr.appendChild(h1_articles);
   toc_ltr.appendChild(ol_articles);