how to close two div when the third div is being opened

Question

Hi guys I will try to explain problem here and forgive me if I cannot explain it very well because I have a bad english any way I want to close the two previous opened pop up if I will open the third pop up here is my code

Javascript

function DisplayByClick(sender) {
var html = '';
html += "<div class='p-image'><img src='src/images/" + collection[index].company_logo + "' /></div>";
html += '<div class="popupdetail">';
html += '<div class="p-name"> Site Name: ' + collection[index].site_name + '</div>';
html += '<div class="p-name"> Site Status: ' + collection[index].status + '</div>';
html += '<div class="p-name"> Country: ' + collection[index].country_name + '</div>';
html += '</div>';
html += '</div>';
$("#map_tooltip" + index).remove();
if (document.getElementById('map_tooltip' + index) == null) {
    markerTooltipdiv = $("<div></div>").attr('class', "map_marker_tooltip" + index);
    $("#markerTooltipContainer").append(markerTooltipdiv);
    $(markerTooltipdiv).css({
        "display": "block", "padding": "5px",
        "position": "absolute",
        "z-index": "13000", "float": "left",
        "cursor": "default",
        "font-family": "Segoe UI",
        "color": "#707070",
        "font-size": "12px",
        "left": parseInt(currentMarker.style.left) + 250,
        "top": parseInt(currentMarker.style.top) - 120,
        "background-color": "#FFFFFF",
        "border": "1px solid #707070"
    });

    $(markerTooltipdiv).html(html);
    $(tooltipdiv).hide();
}

HTML

<div id="markerTooltipContainer" class="popup"></div>

This codes only displays only pop ups and doesnt detect if there is already two pop up opened, because I use this code for displaying country name in a map

Answer 1

This codes only displays only pop ups and doesnt detect if there is already two pop up opened, because I use this code for displaying country name in a map

Just close the already existing popups before creating a new one

$( ".popup" ).remove(); //just put this line before line below
$(markerTooltipdiv).html(html);

Edit

If the same function is suppose to display multiple popups, then I suggest the following

• Loose the index concatenation with map_tooltip

Just keep

$("#map_tooltip").remove();

• Similarly with map_marker_tooltip inside if

Just keep

markerTooltipdiv = $("<div></div>").attr('class', "map_marker_tooltip"); 

This is how it should look

function DisplayByClick(sender) {
  var html = '';
  html += "<div class='p-image'><img src='src/images/" + collection[index].company_logo + "' /></div>";
  html += '<div class="popupdetail">';
  html += '<div class="p-name"> Site Name: ' + collection[index].site_name + '</div>';
  html += '<div class="p-name"> Site Status: ' + collection[index].status + '</div>';
  html += '<div class="p-name"> Country: ' + collection[index].country_name + '</div>';
  html += '</div>';
  html += '</div>';
  $("#map_tooltip").remove();
  markerTooltipdiv = $("<div></div>").attr('class', "map_marker_tooltip");
  $("#markerTooltipContainer").append(markerTooltipdiv);
  $(markerTooltipdiv).css({
    "display": "block",
    "padding": "5px",
    "position": "absolute",
    "z-index": "13000",
    "float": "left",
    "cursor": "default",
    "font-family": "Segoe UI",
    "color": "#707070",
    "font-size": "12px",
    "left": parseInt(currentMarker.style.left) + 250,
    "top": parseInt(currentMarker.style.top) - 120,
    "background-color": "#FFFFFF",
    "border": "1px solid #707070"
  });

  $(markerTooltipdiv).html(html);
  $(tooltipdiv).hide();
}

Answer 2

You may go CSS only also.

 .container { display: flex; flex-direction: row-reverse; } .open ~ .card { display: none; } 

 <div class="container"> <div class="card open">3</div> <div class="card">2</div> <div class="card">1</div> </div>