单击另一个div时如何隐藏div

Question

when I click another div it is coming down the previous div but I want it should come at the same place of the previous div without clicking the previous div(to close)

<div class="col-sm-6 col-lg-3 " onclick="drop_down('drop1')"> (CARD) </div>

<div class="col-sm-6 col-lg-3 " onclick="drop_down('drop2')"> (CARD) </div>

<div class="drop   col-12" id="drop1" style="display:none" >..</div>

<div class="drop   col-12" id="drop2" style="display:none" >..</div>

function drop_down(e){
    var x = document.getElementById(e);
    if(x.style.display === "none"){
        x.style.display = "block";
    }
    else{
        x.style.display = "none";
    }
}

Answer 1

If I understand your problem statement, you want the visible drop down to hide before the new drop down is shown.

To do that, simply hide all the dropdowns before performing your logic:

function drop_down(e){
    var x = document.getElementById(e);
    const xIsShowing = x.style.display === "block";
    document.getElementById('drop1').style.display = 'none';
    document.getElementById('drop2').style.display = 'none';
    if(!xIsShowing) {
        x.style.display = "block";
    }
}

Answer 2

Something like this?

 function drop_down(e){ var drop = document.getElementsByClassName('drop') for(var i = 0; i < drop.length; i++){ if(e == drop[i].id){ drop[i].style.display = "block"; } else{ drop[i].style.display = "none"; } } }

 <div class="col-sm-6 col-lg-3" onclick="drop_down('drop1')"> (CARD) </div> <div class="col-sm-6 col-lg-3" onclick="drop_down('drop2')"> (CARD) </div> <div class="drop col-12" id="drop1" style="display:none" >Div one</div> <div class="drop col-12" id="drop2" style="display:none" >Div two</div>