CODEWITHSUNDEEP
javascript
user14188960
user14188960

Reputation:

how hide the div when click on the another div

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";
    }
}

Upvotes: 0

Views: 87

Answers (2)

terrymorse
terrymorse

Reputation: 7086

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";
    }
}

Upvotes: 1

Stefan Avramovic
Stefan Avramovic

Reputation: 1353

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>

Upvotes: 0

Related Questions