title: Vanilla JS Hide/show DIV toggler
body: <p>I'm trying to implement a way to display / hide a div element with vanilla JavaScript triggered by a click event. The hide function works well but I seem to be missing something important when it comes to displaying the div's again. I've verified that the toggler function is working.</p>
  
  <p>Simple sandbox here:
  <a href="https://codepen.io/pen/eYmOzVe" rel="nofollow noreferrer">https://codepen.io/pen/eYmOzVe</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
      "use strict";
  
      // HTML References
      var flags = document.querySelector(".flags");
  
      // Toogle
      var toogle = true;
  
      // Flag object
      var flagObject = {
          init: function(part1, part2, part3, part4, part5) {
              this.part1 = part1;
              this.part2 = part2;
              this.part3 = part3;
              this.part4 = part4;
              this.part5 = part5;
          },
          draw: function() {
              flags.innerHTML += `
              &lt;div id="${this.part1}"&gt;
              &lt;div class="${this.part2}"&gt;
              &lt;div class="${this.part3}"&gt;&lt;/div&gt;
              &lt;div class="${this.part4}"&gt;&lt;/div&gt;
              &lt;div class="${this.part5}"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              `;
          },
          toogler: function(arg) {
              toogle ? flagObject.remove(arg) : flagObject.show(arg);
              toogle = !toogle;
          },
          remove: function(arg) {
              if (arg == "1") {
                  flag1Element.style.visibility = "hidden";
              }
              if (arg == "2") {
                  flag2Element.style.visibility = "hidden";
              }
          },
          show: function(arg) {
              if (arg == "1") {
                  flag1Element.style.visibility = "visible";
              }
              if (arg == "2") {
                  flag2Element.style.visibility = "visible";
              }
          }
      };
  
      // Create instances of the object
      var swedishFlag = Object.create(flagObject);
      var japaneseFlag = Object.create(flagObject);
  
      // Init
      swedishFlag.init(
          "flag1",
          "flag-sweden",
          "cross-one-sweden",
          "cross-two-sweden"
      );
      japaneseFlag.init("flag2", "flag-japan", "circle-japan");
  
      // Array containing all flags
      var allObjects = [swedishFlag, japaneseFlag];
  
      // Draws flags
      for (let i = 0; i &lt; allObjects.length; i++) {
          allObjects[i].draw();
      }
  
      // HTML element refrences
      var flag1Element = document.querySelector("#flag1");
      var flag2Element = document.querySelector("#flag2");
  
      // Add eventlisteners to remove flags on click
      flag1Element.addEventListener("click", function() {
          flagObject.toogler(1);
      });
  
      flag2Element.addEventListener("click", function() {
          flagObject.toogler(2);
      });
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
      text-align: center;
  }
  
  h3 {
      color: green;
  }
  
  .content {
      border: 1px solid black;
      background-color: #eee;
      padding: 2em;
      margin: 0 auto;
      height: 1000px;
      width: 800px;
      border-radius: 30px;
      text-align: center;
  }
  
  .flags {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      height: 1000px;
  }
  
  .flag-sweden {
      position: relative;
      background-color: #006aa7;
      height: 200px;
      width: 320px;
      margin-bottom: 2em;
  }
  
  .cross-one-sweden {
      background-color: #fecc00;
      position: absolute;
      width: 40px;
      height: 200px;
      top: 0;
      left: 100px;
  }
  
  .cross-two-sweden {
      background-color: #fecc00;
      position: absolute;
      width: 320px;
      height: 40px;
      top: 80px;
      left: 0;
  }
  
  .flag-japan {
      position: relative;
      height: 200px;
      width: 320px;
      background-color: white;
      margin-bottom: 2em;
  }
  
  .circle-japan {
      background-color: #bd0029;
      height: 125px;
      width: 125px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -62.5px 0 0 -62.5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;h1&gt;Sandbox&lt;/h1&gt;
          &lt;div id="content" class="content"&gt;
              &lt;div class="flags"&gt;&lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>