Search code examples
htmldropdown

3 dropdown separate drop down lists, only select top one

I have created a website (i'm fairly new to using html on a website.... i normally just use images and text) and i want 3 drop down boxes independently selectable which will go to 3 different pages

the problem is, all the lists work in coding, but when i click on any buttons it only selects the top list

3 drop down boxes

how the drop looks when you select any button

this is the coding ive used....there are 120 different class links, for each dropdown

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #005eb8;
  color: white;
  margin-left: 98px;
  padding: 5px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #004a90;
}

.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  margin-left: 98px;
  background-color: #f4f7f8;
  min-width: 50px;
  height: 440px;
  overflow-y: scroll;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 1px 6px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #005eb8; color:white;}

.show {display: block;}
</style>
</head>
<body>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">--- Select ---</button>
  <div id="myDropdown1" class="dropdown-content">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20t.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91t.html">1890-91</a>

  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown1").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
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>

thanks in advance

Chris

UPDATE

ok. many thanks for the help. i've manages to get the 3 different buttons to go to the 3 different sections, however the last issue is that the top 2 buttons do not close when clicking anywhere else on the page.... but the bottom button does. this is the code.... Can anyone suggest script to close the top two? the webpage is https://www.glossopnorthendafc.co.uk/history.html

<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn1 {
  background-color: #005eb8;
  color: white;
  margin-left: 86px;
  padding: 5px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.dropbtn1:hover, .dropbtn1:focus {
  background-color: #004a90;
}

.dropdown1 {
  position: absolute;
  display: inline-block;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  margin-left: 91px;
  background-color: #f4f7f8;
  min-width: 50px;
  height: 440px;
  overflow-y: scroll;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content1 a {
  color: black;
  padding: 1px 6px;
  text-decoration: none;
  display: block;
}

.dropdown1 a:hover {background-color: #005eb8; color:white;}

.show {display: block;}
</style>
</head>
<body>

<div class="dropdown1">
  <button onclick="myFunction1()" class="dropbtn1">--- Select ---</button>
  <div id="myDropdown1" class="dropdown-content1">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20r.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19r.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91r.html">1890-91</a>

  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction1() {
             document.getElementById("myDropdown1").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown-content1");
    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>
<br>

<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn2 {
  background-color: #005eb8;
  color: white;
  margin-left: 86px;
  padding: 5px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.dropbtn2:hover, .dropbtn2:focus {
  background-color: #004a90;
}

.dropdown2 {
  position: absolute;
  display: inline-block;
}

.dropdown-content2 {
  display: none;
  position: absolute;
  margin-left: 91px;
  background-color: #f4f7f8;
  min-width: 50px;
  height: 440px;
  overflow-y: scroll;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content2 a {
  color: black;
  padding: 1px 6px;
  text-decoration: none;
  display: block;
}

.dropdown2 a:hover {background-color: #005eb8; color:white;}

.show {display: block;}
</style>
</head>
<body>

<div class="dropdown2">
  <button onclick="myFunction2()" class="dropbtn2">--- Select ---</button>
  <div id="myDropdown2" class="dropdown-content2">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20t.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19t.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91t.html">1890-91</a>

  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
  document.getElementById("myDropdown2").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn2')) {
    var dropdowns = document.getElementsByClassName("dropdown-content2");
    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>
<br>

<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn3 {
  background-color: #005eb8;
  color: white;
  margin-left: 86px;
  padding: 5px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.dropbtn3:hover, .dropbtn3:focus {
  background-color: #004a90;
}

.dropdown3 {
  position: absolute;
  display: inline-block;
}

.dropdown-content3 {
  display: none;
  position: absolute;
  margin-left: 91px;
  background-color: #f4f7f8;
  min-width: 50px;
  height: 440px;
  overflow-y: scroll;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content3 a {
  color: black;
  padding: 1px 6px;
  text-decoration: none;
  display: block;
}

.dropdown3 a:hover {background-color: #005eb8; color:white;}

.show {display: block;}
</style>
</head>
<body>

<div class="dropdown3">
  <button onclick="myFunction3()" class="dropbtn3">--- Select ---</button>
  <div id="myDropdown3" class="dropdown-content3">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20s.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19s.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91s.html">1890-91</a>

  </div>
</div>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction3() {
    document.getElementById("myDropdown3").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn3')) {
    var dropdowns = document.getElementsByClassName("dropdown-content3");
    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>
<br>
Solution

  • I only see a single <div class="dropdown"> in your example, but I assume there are more in your code. If that's the case, bear in mind HTML ids are intended to be unique. Try changing the myDropdown1 to a class and selecting in in your JavaScript using getElementsByClassName. Reach out on Twitter if you'd like direct help. Up The Hillmen!