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"); }); });
Preview:
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