CODEWITHSUNDEEP
javascripthtmlcss
Raios
Raios

Reputation: 65

How to Properly Handle Multiple Drop Down Buttons

my problem with this system that I'm doing is that I can't seem to make the drop down buttons cooperate with each other. I just want the first button that was clicked to close when another button is clicked. So far they just stack with each other unless clicked again or clicked outside the drop down area.

Here's my code :

<html>
<style>
.dropbtn {
    background-color: #00BFFF;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #1E90FF;
}

.dropdown2 {
    position: relative;
    display: block;
}


.dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #1E90FF;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content2 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

}

.dropdown2 a:hover {
background-color:  #00BFFF;

}

.dropdown {
    position: relative;
    display: block;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1E90FF;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

}

.dropdown a:hover {
background-color:  #00BFFF;

}

.show {
display:block;
position: relative;
left:18.6%;
top:-20%;
width: 80%;
}

.border2 {
float: left;
border: 2px #FA5858;
background-color: #FFFFFF;
margin: 0 auto;
padding-bottom:40px;
padding-top:5px;
width : 86%;
height : 44%;
top : -10%;
left : 7%;
position : relative;
padding: 1em;
}
</style>


<body>
<div class = "border2">
<div style = "font-size:25px;list-style-type: none;margin: 0;padding: 10px;overflow: hidden;background-color: #BDBDBD;
position : relative;top : -10%;width : 101.2%;left:-1.5%;"><strong>NEED HELP?</strong></div>

<div class="dropdown">

<button onclick="myFunction()" class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">GUIDES</button>
  <div id="myDropdown" class="dropdown-content">
  <ul>
    <li><a>asasd.</a></li>
    <li><a>Thasdat.</a></li>
    <li><a>test2.</a></li>
  </ul>
  </div>



<br><br><br><br>
<button onclick="myFunction2()" class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">SUPPORT</button>
  <div id="myDropdown2" class="dropdown-content2">
  <ul>
    <li><a>test.</a></li>
    <li><a>test.</a></li>

  </ul>
  </div>
</div>


</div>
<script>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function myFunction2() {
    document.getElementById("myDropdown2").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) 
  {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) 
    {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) 
      {
        openDropdown.classList.remove('show');
      }
    }
  }
}

</script>


</body>
</html>

Upvotes: 0

Views: 193

Answers (2)

Evochrome
Evochrome

Reputation: 1215

I'm guessing you mean this: NB: Especially note the commentary in the JS and the way the function is called in the onclick events in html. Namely, myFunction(drpid).

JAVASCRIPT, CSS AND HTML:

function myFunction(drpid) {       //THIS WAY YOU ONLY NEED ONE FUNCTION
    document.getElementById(drpid).classList.toggle("show"); //SAME TOGGLE
	if (drpid=='myDropdown'){ //IF THE BUTTON CLICKED IS 'GUIDES'
    	document.getElementById("myDropdown2").classList.remove("show")		
		}
		else{ //IF THE BUTTON CLICKED ISN'T 'GUIDES'
    	document.getElementById("myDropdown").classList.remove("show")		
		}
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    	document.getElementById("myDropdown2").classList.remove("show")		
    	document.getElementById("myDropdown").classList.remove("show")		
  }
}
.dropbtn {
    background-color: #00BFFF;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #1E90FF;
}

.dropdown2 {
    position: relative;
    display: block;
}


.dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #1E90FF;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content2 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

}

.dropdown2 a:hover {
background-color:  #00BFFF;

}

.dropdown {
    position: relative;
    display: block;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1E90FF;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

}

.dropdown a:hover {
background-color:  #00BFFF;

}

.show {
display:block;
position: relative;
left:18.6%;
top:-20%;
width: 80%;
}

.border2 {
float: left;
border: 2px #FA5858;
background-color: #FFFFFF;
margin: 0 auto;
padding-bottom:40px;
padding-top:5px;
width : 86%;
height : 44%;
top : -10%;
left : 7%;
position : relative;
padding: 1em;
}
<div class = "border2">
<div style = "font-size:25px;list-style-type: none;margin: 0;padding: 10px;overflow: hidden;background-color: #BDBDBD;
position : relative;top : -10%;width : 101.2%;left:-1.5%;"><strong>NEED HELP?</strong></div>

<div class="dropdown">

<button onclick="myFunction('myDropdown')" class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">GUIDES</button>
  <div id="myDropdown" class="dropdown-content">
  <ul>
    <li><a>asasd.</a></li>
    <li><a>Thasdat.</a></li>
    <li><a>test2.</a></li>
  </ul>
  </div>



<br><br><br><br>
<button onclick="myFunction('myDropdown2')" class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">SUPPORT</button>
  <div id="myDropdown2" class="dropdown-content2">
  <ul>
    <li><a>test.</a></li>
    <li><a>test.</a></li>

  </ul>
  </div>
</div>


</div>

Hope this helped

Upvotes: 1

Nahuel
Nahuel

Reputation: 164

Assuming that you will have always a button and a dropdown with a different id next to the button. I think this would be a solution, and also it avoid redundancy in the CSS.

function hideDropdown(exceptId){
  var dropdowns = document.getElementsByClassName("dropdown-content");
  for (var i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show') && openDropdown.id !== exceptId) {
      openDropdown.classList.remove('show');
    }
  }
}

window.onclick = function(event) {
  if (!event.target.classList.contains('dropbtn')) {
    hideDropdown(null);
  }else{
    var dropdown = event.target.nextElementSibling;
    dropdown.classList.toggle("show");
    hideDropdown(dropdown.id);
  }
}
.dropbtn {
  background-color: #00BFFF;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #1E90FF;
}

.dropdown2 {
  position: relative;
  display: block;
}

.dropdown {
  position: relative;
  display: block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1E90FF;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

}

.dropdown a:hover {
  background-color:  #00BFFF;

}

.show {
  display:block;
  position: relative;
  left:18.6%;
  top:-20%;
  width: 80%;
}

.border2 {
  float: left;
  border: 2px #FA5858;
  background-color: #FFFFFF;
  margin: 0 auto;
  padding-bottom:40px;
  padding-top:5px;
  width : 86%;
  height : 44%;
  top : -10%;
  left : 7%;
  position : relative;
  padding: 1em;
}
<div class = "border2">
  <div style = "font-size:25px;list-style-type: none;margin: 0;padding: 10px;overflow: hidden;background-color: #BDBDBD;
                position : relative;top : -10%;width : 101.2%;left:-1.5%;"><strong>NEED HELP?</strong></div>

  <div class="dropdown">

    <button class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">GUIDES</button>
    <div id="myDropdown" class="dropdown-content">
      <ul>
        <li><a>asasd.</a></li>
        <li><a>Thasdat.</a></li>
        <li><a>test2.</a></li>
      </ul>
    </div>



    <br><br><br><br>
    <button class="dropbtn" style = "position:absolute; left:-1.5%; width:20%;">SUPPORT</button>
    <div id="myDropdown2" class="dropdown-content">
      <ul>
        <li><a>test.</a></li>
        <li><a>test.</a></li>

      </ul>
    </div>
  </div>


</div>

Upvotes: 1

Related Questions