Search code examples
javascriptjqueryonclickhiddenvisible

JavaScript onclick visible / hidden div - How can I fix this?

I have created a map on my website, which should then become interactive.

I have created a div container and placed it exactly where there is a city in which we have a company.

With :hover per CSS, I have created infoboxes to store the information.

I want whenever I click on any div, it clicks the information of the selected place.

Here my CSS:

#information_city 
visibility: hidden;
width: 540px;
height: 335px;
background-color: white;
position: absolute;
z-index: 1;
top: 50px;
margin-left: -200px;
border: 1px solid # 999;
filter: alpha (opacity = 90);
transition: opacity 1.5s;


#information_city
  visibility: visible;

HTML:

<div id = "city">
<div id = "information_city">
</ Div>
</ Div>

Now I want the infobox per click to open with a toggle.

It is important that the inner div folder information_city opens when the city is clicked.

How can I solve this the best?

Solution 
  • <html>
<head>
<style>
.city {
  height:100%;
  width:100%;
  position: relative; 
}

.information_city {
    visibility: hidden;
    width: 540px;
    height: 10px;
    background-color: white;
    z-index: 1;
    top: 50px;
    border: 1px solid # 999;
    opacity: 0;
    transition: opacity 1.5s ease-in, visibility 1.5s ease-in;
}
.city.show .information_city {
    visibility: visible;
    opacity: 1;
}
</style>
</head>
<body>
    <div class="city">
        <p>Click on city</p>
        <div class="information_city">
            <p>details</p>
        </div>
    </div>
      <div class="city">
        <p>Click on city</p>
        <div class="information_city">
            <p>details</p>
        </div>
  </div>
  <div class="city">
        <p>Click on city</p>
        <div class="information_city">
            <p>details</p>
        </div>
  </div>

    <script>
var cities = document.querySelectorAll('.city');

for (var i=cities.length; i--;) {
    cities[i].addEventListener('click', ToggleDetails, false);
}

function removeShow() {
  var cities = document.querySelectorAll('.city');
  for (var i=cities.length; i--;) {
      cities[i].classList.remove('show');
  }
}      

function ToggleDetails() {  
     if(this.classList.contains('show')) {
       //Hide them all
        removeShow();
     } else {
       //Hide the other and show this one
       removeShow();
       this.classList.add('show');
     }
}
    </script>
</body>
</html>