title: on click function to reveal hover overlay - appears on click but won't disappear on 2nd click
body: <p>I have a portfolio grid of images and when a user hovers or taps on a mobile a transparent overlay with some text and a button appears</p>
  
  <p>I am using the on click function</p>
  
  <p>It works fine on my touch screen laptop but not on my iOS phone or tablet</p>
  
  <p>The overlay appears on first tap, but when I tap again it does not disappear unless I tap another grid image. </p>
  
  <p>I would like it to disappear on 2nd tap</p>
  
  <p>I have tried various ways of making this work, and the closest I have got it for it to disappear when another grid image is tapped</p>
  
  <p>Here is my code:
     <b>HTML</b></p>
  
  <pre><code>    &lt;div class="col-xs-12 col-sm-7"&gt;&lt;div class="image-wrap"&gt;
  &lt;div onclick="on()"&gt;
  &lt;img src="assets/images/pic.jpg"&gt;
  &lt;div class="overlay blue"&gt;
          &lt;h3&gt;Portfolio item 1&lt;/h3&gt;
          &lt;hr&gt;
            &lt;p&gt;&lt;strong&gt;Coming Soon&lt;/strong&gt;&lt;br&gt; some overlay text here&lt;/p&gt;
            &lt;br&gt;
            &lt;a href="contact-us" class="btn btn-white btn-lg"&gt;View Website&lt;/a&gt;
          &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function on() {
      document.getElementById("overlay").style.display = "block";
  }
  
  function off() {
      document.getElementById("overlay").style.display = "none";
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.image-wrap {
  display: inline-block;
  position: relative;  
  }
  .overlay {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:white;
  opacity: 0;
  transition:opacity .5s ease-out;
  text-align: center;
  hr {
  border: 1px solid #fff;
  width: 10%;
   }
  
  }
  
  .image-wrap:hover .overlay {
  opacity: 1;
  }
  
  .red {
  background: rgba(102,67,154,0.7);
  }
  
  .blue {
  background: rgba(23,56,179,0.7);
  }
  .purple1 {
  background: rgba(140,23,179,0.7);
  }
  
  .purple2 {
  background: rgba(71,13,142,0.7);
  }
  }
  </code></pre>
  
  <p>I initially tried this with just CSS which gave me the desired result on all devices apart from iOS! </p>
  
  <p>So I have decided to use the on click function to be more sure it works on all devices. I added the on click function to my existing code which I wrote to be used with CSS, but as I am rather new to JS I am wondering if I have it in the wrong place (the on-click)? I have tried lots of variations but this is the best I can get it to work</p>
  
  <p>Any ideas of suggestions on how I can make the overlay disappear on the 2nd click would be great!</p>
  
  <p><strong>js fiddle</strong>
  <a href="https://jsfiddle.net/49h450g9/14/" rel="nofollow noreferrer">https://jsfiddle.net/49h450g9/14/</a></p>
  
  <p>Please note: This works fine on touch-screen laptops, just not mobiles!</p>
  
  <p>Thanks!</p>