How can I close all divs except the one which is open?

Question

So I have a div with 10 other divs inside. They have all display= “none”. Each div is linked with a image, when you click on the image, the linked div opens up. But the div only can be closed when I click on the image again. But if I click all 10 images, all 10 divs will open up & they overlap each other.

How can I fix that only 1 div can be showed at a time? So if one div is opened and I click on a new image; the old div disappears and the new div shows up?

function hideShowDiv() {
function showDiv() {
    if(kledingInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
  function showDiv2() {
    if(ewlInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
  function showDiv3() {
    if(onderwijsInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
  function showDiv4() {
    if(overigeInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
  function showDiv5() {
    if(vrijeTijsInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
}
hideShowDiv();

so this is what i have tried but it doesn't work. All divs have the class info.

Answer 1

Base on the code you post

function hideShowDiv() {
function showDiv() {
    if(kledingInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
  function showDiv2() {
    if(ewlInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
  function showDiv3() {
    if(onderwijsInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
  function showDiv4() {
    if(overigeInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
  function showDiv5() {
    if(vrijeTijsInfo.style.display = "inline-block") {
        document.querySelectorAll(".info").style.display = "none";
    }
  }
}
hideShowDiv();

There are several things, first of all, you are nesting the function. when you call hideShowDiv(), you are just defining 5 functions instead of executing anyone of them. to archive what you discribe, you just need to document.querySelectorAll(".info").style.display = "none"; first and then run all the if statement. like this:

function hideShowDiv(element) {
    document.querySelectorAll(".info").style.display = "none";
    element.style.display = "inline-block") 
}

hideShowDiv(document.getElementById("whatevertheidis"));