Open modal from link without triggering parent javascript

Question

I have a packery layout where each div expands on click, revealing hidden content including a link. When you click on a link a modal is opened but at the moment this also triggers the packery layout and collapses the parent div.

I'd like the following to happen:

1. Click div
2. Expand div revealing link
3. Click link revealing modal, but without collapsing parent div
4. Close modal, still without collapsing parent div

I've tried stopPropagation but it also disables the modal. I've also tried moving the class that triggers the expanding of the divs (.expand) to another element but this breaks the structure/order of my packery layout.

JS here:

$(document).ready(function(){
var $grid = $('.grid').packery({
      itemSelector: '.grid-item',
  });

  $grid.on( 'click', '.expand', function( event ) {
        $(  event.currentTarget  ).toggleClass('grid-item--large');
        $grid.packery('layout');
        $(this).children('.hiddenInfo').toggle();
  });

});

& a plugin called jquery-modal: https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js

Here's a snippet of HTML:

  <div class="container">
    <div class="grid">
      <div class="grid-item">
        <div class="grid-item-content expand">
          <div class="hiddenInfo">
            <a href="#openModalLink" rel="modal:open"><img src="img/thumb.jpg"/></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="openModalLink" class="modal">
    <p>Some content in the modal</p>
  </div>

CSS:

.container {
  padding: 50px 0 30px 0;
  display: block;
  width: 98vw;
}

.grid {
  width: 100%;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.hiddenInfo {
  display: none;
}

.expand {
  display: block;
  z-index: 999;
  width: 150px;
  height: 150px;
  background: #ffffff;
}

.expand:hover {
  cursor: pointer;
}

.grid-item-content {
  width: 150px;
  height: 150px;
  border: 1px solid black;
}

.grid-item {
  float: left;
  padding: 4px;
}

.grid-item--large {
  width: 520px;
  height: 375px !important;
  border-radius: 0 !important;
  background-color: #ffffff;
}

Any help would be greatly appreciated, I'm really stuck.

Thank you.