Click on a grid item to show an expanded row of info below the clicked item's row.

grid-expander.js

(function(){

  "use strict";

  function PromiseNew() {

    $('.info-cards__info-card').on('touchstart click', checkInfoExpander);
    $('.info-cards').on('touchstart click', '.info-expander__close', closeInfoExpanders);

  }

  function checkInfoExpander () {

    if ($(this).hasClass('expanded')) {
      closeInfoExpanders()
      return
    }

    var $trigger = $(this);

    if ($(this).siblings().hasClass('expanded')) {
      $('.info-cards__info-card').removeClass('expanded')
      $('.info-cards__info-expander')
        .velocity('slideUp', {
          complete: function() {
            $(this).remove()
            openInfoExpander($trigger)
          }
        })
    } else {
      openInfoExpander($trigger)
    }

  }

  function openInfoExpander($element) {
    var $placement = findRowPlacement($element)
    $element
      .addClass('expanded')
      .find('.info-card__expanded')
      .clone()
      .addClass('info-cards__info-expander')
      .removeClass('info-card__expanded')
      .insertAfter($placement)
      .velocity('slideDown')
  }

  function closeInfoExpanders () {
    $('.info-cards__info-card').removeClass('expanded')
    $('.info-cards__info-expander')
      .velocity('slideUp', {
        complete: function() {
          $(this).remove()
        }
      })
  }

  function findRowPlacement ($element) {
    if ($element.is(':last-of-type')) {
      return $element
    } else {
      var top = $element.offset().top
      var $after = null
      $element.nextAll().each(function (i, v) {
        if ($(v).offset().top !== top) {
          $after = $(v).prev()
          return false
        }
      })

      if (!$after) {
        $after = $element.nextAll().last()
      }

      return $after
    }
  }

  $(document).ready(function() {
    new PromiseNew();
  });
})();