title: Clicking on a clickable image inside a DIV shouldn't affect the DIV itself
body: <p>I have an image inside a <code>div</code>. The <code>div</code> has to resize on click so I'm using jQuery to toggle its class with different height.</p>
  
  <pre><code>$(document).ready(function(){
      $('.class').on('click', function() {
      $(this).toggleClass('clicked');
      });
  });
  </code></pre>
  
  <p>But I also need to insert an image into the div with <code>a href</code> which will open a lightbox. Clicking on the image not only opens the lightbox but also expands the div under it. Is there a way how clicking on the image wouldn't affect the div? I have tried <code>z-index</code> but it didn't work.</p>