Div expanding to full screen with a close button

[Guest]

Hello everyone!

 

I was wondering if there would be a way to add a close button to the div when it is in full screen mode so that it shrinks back to its original position by clicking only on it. Right now it shrinks back by clicking anywhere — which I want to disable.

 

Any help would be much appreciated.

 

Thanks ?

See the Pen WwgQEV by osublake (@osublake) on CodePen

[Guest]

Any ideas anyone? If I have a button with the label closing-button, it has been recommended here to include the following code since it has a closing function per div, so I'll need a closing button per div. 

 

Does anyone know where this code goes and if I should take something out when I include it?
 

[...]
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);
  }); 

 

[ZachSaucier]

Hey dedog and welcome to the GreenSock forums.

 

You just have to switch which element the click listener is applied to:

See the Pen povPOQw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Don't be afraid to mention that "someone" is from StackOverflow: https://stackoverflow.com/questions/59451992/close-button-for-an-expanding-div

[Guest]

Hey Zach! Thanks so much for the warm welcome and the pen — this is exactly what I needed!

 

Also, excuse me for not referencing to the StackOverflow, will get some good habits when I use the forums more ?