Search code examples
javascriptjqueryhtmlcsspackery

Using mouse actions with Packery library after expanding an item

I've made a fork (click) on Codepen form David DeSandro's "Packery - animate item width and height, with responsive sizing". As you can see when you click on the button inside an item it expands and a black tint covers the whole canvas. Click on it again, contracts and the black tint is gone. What I can't wrap my head around is when someone clicks outside the item when expanded, like on the <body>, item contracts and the black tint's gone. If anyone can help me with this...

Solution

  • I've forked your CodePen - take a look here.

    Basically, in your click eventListener on the body element, you have to do the following:

    $("body").click(function(event){
  //check if body has overlay-layer, meaning an item is expanded
  if ($(event.target).hasClass('overlay-layer')){
    $(this).removeClass('overlay-layer');
    $('.item').removeClass('is-expanded');
    $container.packery();
  }
});