How can I switch my overlays so that it can close when I click another link?

Question

I have an overlay effect for one website. I have two links for two overlays. After I click the second link, the first overlay does not close and two overlays are displayed. How can I close the initial overlay?

HTML:

<nav id="menuheader"> <ul style="display:block;"> <li> <div class="about link" data-link="overlay-about"> About </div> </li> <li> <div class="service link" data-link="overlay-service"> Services </div> </li> <li> <div class="contact link"> Contact </div> </li> </ul> </nav> <aside class=" overlay overlay-about overlay-contentscale"> <div class="overlay_close"></div> </aside> <aside class="overlay overlay-service overlay-contentscale "> <div class="overlay_close"></div> </aside> 

JavaScript:

 $(".link").on('click', function(e) { e.preventDefault(); var currentClass = $(this).data("link"); $("aside." + currentClass).addClass("open"); }) $('.overlay_close').on('click', function() { if ($('.overlay').hasClass('open')) { $("aside.overlay").removeClass("open"); $(".overlay").addClass('close'); $('.overlay').removeClass('close'); } }); 

If you can use Javascript, not JQuery.

Answer 1

So, as you requested, in simple javascript you could do the following. I entered a description of each line of code as inline comments.

 function get(selector) { return document.querySelector(selector); } function getAll(selector) { return document.querySelectorAll(selector); } //Loop thru all the links [].forEach.call(getAll(".link"), function(div) { //Add click event to each them div.addEventListener("click", function(event) { //Cross browser event object event = event || window.event; //Get the data attribute of the clicked link var currentClass = div.getAttribute("data-link") || false; //Loop thru all the overlays, remove the open class [].forEach.call(getAll(".overlay"), function(ol) { ol.className = ol.className.replace(/open/, "").replace(/\s{2,}/, " "); }); //If no data attribute on the link elem, return if (!currentClass) return; //Get the element with the link data attr class var classes = get("." + currentClass).className; //And add open class to it get("." + currentClass).className = classes + " open"; }); }); 

 .overlay { display: none; } .open { display: block; } 

 <nav id="menuheader"> <ul style="display:block;"> <li> <div class="about link" data-link="overlay-about"> About </div> </li> <li> <div class="service link" data-link="overlay-service"> Services </div> </li> <li> <div class="contact link"> Contact </div> </li> </ul> </nav> <aside class="overlay overlay-about overlay-contentscale"> <div>Some content ovl about</div> <div class="overlay_close"></div> </aside> <aside class="overlay overlay-service overlay-contentscale"> <div>Some content ovl service</div> <div class="overlay_close"></div> </aside> 

Follow the code above and do the same for closed overlay. If you need any help let me know.

jQuery version: - Demo version -

 $(".link").on('click', function(e) { e.preventDefault(); var currentClass = $(this).data("link"); $("aside." + currentClass).addClass("open").siblings().removeClass("open"); }) $('.overlay_close').on('click', function() { var $overlay = $(this).closest(".overlay"); $overlay.is(".open") && $overlay.removeClass("open"); }); 

Hope this helps.

Answer 2

Failure of all add-ons should be done as follows:

 $(".link").on('click', function(e) { e.preventDefault(); $('.overlay').hide(); // <----- new line var currentClass = $(this).data("link"); $("aside." + currentClass).addClass("open"); }); $('.overlay_close').on('click', function() { if ($('.overlay').hasClass('open')) { $("aside.overlay").removeClass("open"); $(".overlay").addClass('close'); $('.overlay').removeClass('close'); } }); 

Answer 3

First of all, this code does not mean anyting

 $(".overlay").addClass('close'); $('.overlay').removeClass('close'); 

You need to update the code in javascript as follows

 var currentClass; $(".link").on('click', function(e) { e.preventDefault(); currentClass = $(this).data("link"); $("aside." + currentClass).addClass("open"); }) $('.overlay_close').on('click', function() { $("aside." + currentClass).removeClass("open"); }); 

EDIT: Javascript Solution

 var link = document.getElementsByClassName('link') var overlay_close = document.getElementsByClassName('overlay_close'); var currentClass; link.onclick = function(e){ e.preventDefault(); currentClass = this.getAttribute('data-link'); this.classList.add("open") } overlay_close.onclick = function(e){ var currentElement = document.querySelector("aside."+currentClass); currentElement.classList.remove("open"); } 

Answer 4

You might want to create a function that closes all overlays.

 function closeAllOverlays () { $('.overlay').removeClass('open'); } 

and call it before opening it:

 $(".link").on('click', function(e) { e.preventDefault(); closeAllOverlays(); var currentClass = $(this).data("link"); $("aside." + currentClass).addClass("open"); }); 

And I'm using jQuery since you seem to already be using it yourself.

Answer 5

Try:

CSS rule:

 .overlay { display: none; } .active { display: block; } 

Javascript Solution:

 function getAllelements(selector) { return document.querySelectorAll(selector); } function addEventHandler(element,eventType,handler) { if (element.addEventListener) element.addEventListener (eventType,handler,false); else if (element.attachEvent) element.attachEvent ('on'+eventType,handler); } function clickOnlink(event){ var curTarget = event.target; closeAlloverlay(); var curOverlayobj = document.querySelector("."+curTarget.dataset.link); curOverlayobj.classList.add("active"); } function closeAlloverlay(){ var overLayelelist = getAllelements(".overlay"); for(var i=0; i<overLayelelist.length; i++){ overLayelelist[i].classList.remove("active"); } } function linkObjinit(linkObj){ if(linkObj.length > 0){ for (i = 0; i < linkObj.length; i++) { var curObj = linkObj[i]; if(curObj.dataset.link){ addEventHandler(linkObj[i],'click',clickOnlink); } else{ addEventHandler(linkObj[i],'click',closeAlloverlay); } } } } linkObjinit(getAllelements("#menuheader .link")); /* * For nth number of Menu * Call "linkObjinit(getAllelements("#NAVTAGID .link"))" function */