title: changing display property of a divider in JavaScript
body: <p>I am working on this program in HTML (with of course CSS and JS) but I am having troubles with some code cause I want to make an area be managable so that you can make it visible, and invisible when ever you want. if you dont get what I mean, I will just show you in code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//browserSearching.js
  // First, the variables!
   var link = document.getElementById("searchbar").value;
   var page = document.getElementsByTagName("iframe").src;
  
   var button = {
    menu: document.getElementById("dropdown"),
    enter: document.getElementById("enter"),
    back: document.getElementById("back"),
    forward: document.getElementById("forward")
   }
  
   var more = document.getElementById("more");
  
   // Now it is time for functions!
  
   function enableMore() {
    if (more.style.display == "block") {
     more.style.display == "none"
    } else {
     more.style.display == "block"
    }
   }
  
   function update() {
    link = document.getElementById("searchbar").value;
  
    setTimeout(update, 1);
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>// style.css
  #splitter {
    margin-bottom: 0px;
   }
  
  // This part is not really needed</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Indext.html--&gt;
  &lt;!DOCTYPE html&gt;
   &lt;html&gt;
    &lt;head&gt;
     &lt;title&gt;Web Browser in Web Browser&lt;/title&gt;
     &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
     &lt;script src="data.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body style="margin: 0px;" onload="update();"&gt;
     &lt;browser&gt;
     &lt;div id="top"&gt;
  
      &lt;!-- First Layer --&gt;
      &lt;div id="tabs"&gt;
       &lt;tab&gt;&lt;/tab&gt;
      &lt;/div&gt;
      &lt;br /&gt;&lt;!-- Second Layer --&gt; &lt;hr /&gt;
      &amp;#160;
      &lt;button id="back"&gt;&amp;#60;&lt;/button&gt;
      &lt;button id="forward"&gt;&amp;#62;&lt;/button&gt;
      &lt;button id="home"&gt;H&lt;/button&gt;
  
      &lt;input id="searchbar" style="width: 1107px;" /&gt;
      &lt;button id="enter" onclick="page = link;"&gt;Ent&lt;/button&gt;
  
      &lt;button id="dropdown" onclick="enableMore();"&gt; : &lt;/button&gt;
  
      &lt;div id="more" style="display: none;"&gt;
  
       &lt;!-- This is all one button, and it was hard! --&gt;
       &lt;label for="themes" class="button"&gt;Upload CSS Theme&lt;/label&gt;
       &lt;input id="themes" style="display: none;" type="file" /&gt;
       &lt;!-- End of the button --&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;hr id="splitter"/&gt;
     &lt;iframe name="webpage" src="browser.html" width="1277.5px" height="640px" style="border-width: 0px;"&gt;&lt;/iframe&gt;
    &lt;/browser&gt;
    &lt;script src="browserSearching.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>do you get what I am trying to say now? just press the [:] button... it doesn't show anything when pressed</p>