Close button for an expanding div

Question

I am trying to include a close button for closing the expanded div to its original state. Right now in both examples below, you can click anywhere to close it which I want to disable.

Solutions for any of the two below would be great.

Thanks!

First CodePen

https://github.com/colinlohner/FSM-JS

Second CodePen

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.3/TweenMax.min.js

Answer 1

Make a closing button and attach the click event listener to the closing button instead of the expanded div.

In the first pen, lets say your closing button has the id closing-button. You'll have to replace

$fsmActual.addEventListener("click", closeFSM);

with

document.querySelector('#closing-button')

The second one has an closing function per div, so you'll need a closing button per div. Try this:

[...]
var tiles = document.querySelectorAll(".tile");
var closing = document.querySelectorAll(".closing-button");

for (var i = 0; i < tiles.length; i++) {  
  addListeners(tiles[i], pages[i], closing[i]);
}

function addListeners(tile, page, close) { 

  tile.addEventListener("click", function() {
    animateHero(tile, page);
  });

  close.addEventListener("click", function() {
    animateHero(page, tile);
  });