Preview:
var $cont = document.querySelector(".cont");

var $elsArr = [].slice.call(document.querySelectorAll(".el"));

var $closeBtnsArr = [].slice.call(document.querySelectorAll(".el__close-btn"));

​

setTimeout(function () {

 $cont.classList.remove("s--inactive");

}, 0);

​

$elsArr.forEach(function ($el) {

 $el.addEventListener("click", function () {

  if (this.classList.contains("s--active")) return;

  $cont.classList.add("s--el-active");

  this.classList.add("s--active");

 });

});

​

$closeBtnsArr.forEach(function ($btn) {

 $btn.addEventListener("click", function (e) {

  e.stopPropagation();
20
  $cont.classList.remove("s--el-active");

  document.querySelector(".el.s--active").classList.remove("s--active");

 });

});
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter