title: Muliple hidden fullscreen divs?
body: <p>I'm working on my portfolio website, but can't solve the following problem.</p>
  
  <p>The website is basically just pictures, if you click on one,
  a semi-transparent fullscreen div opens with information (more pics and some text).
  If you click again the div will close.</p>
  
  <p>jQuery for hiding and showing:</p>
  
  <pre><code>&lt;script&gt;
  $(function()
  {
      $('.masonryImage').click(function()
      {
          $('.hiddenDiv').show();
          $("body").css("overflow", "hidden");
      });
      $('.hiddenDiv').click(function()
      {
          $('.hiddenDiv').hide();
          $("body").css("overflow", "auto");
      });
  });
  &lt;/script
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="masonryImage"&gt;
          &lt;img src="images/pic1.jpg" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="hiddenDiv"&gt;
       &lt;div class="text"&gt;
           &lt;p&gt;Lorem ipsum...&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="pics"&gt;
           &lt;img src="images/pic2.jpg" alt=""&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So far it works with one picture, but when I'm adding another,
  the new hidden text will overlay the first one, same with the pictures.</p>
  
  <p>Is it because I'm using the same class ("masonryImage")?
  Or isn't my Javascript removing the divs properly?</p>
  
  <p>Many thanks.</p>
  
  <p>Edit: CSS might be usefull:</p>
  
  <pre><code>.hiddenDiv {
      position:fixed;
      top:0;
      left:0;
      background:rgba(255,255,255,0.8);
      z-index:900;
      width:100%;
      height:100%;
      display:none;
      overflow: scroll;
   }
  
  .masonryImage {
  
       margin: 20px 20px 20px;
       display: inline-block;
       cursor: pointer;
      }
  </code></pre>