Thu. Mar 23rd, 2023

[ANSWERED] javascript – Drop Down Box (CSS,JS,HTML,BBCode)

By

Nov 20, 2022 css, html, javascript

Solution 1 :

You’re using same ID for every dropdown; remember ID’s must be unique. Remove ID and send clicked item to the function.

Inside function, use clicked item to get parentNode and find the container by its class, then show or hide with togle():

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(item) {
  item.parentNode.querySelector(".dropdown-content").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');
      }
    }
  }
}

/* Dropdown Button */
.dropbtn {
    border: 1px dotted !important;
  background-color: #1b1b1b;
  border-color:white !important;
  color: white;
min-width: 500px !important;
  font-size: 16px;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: Black;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline-block;
position: relative;
 z-index: 500 !important;
min-width: 500px !important;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
/*    position: absolute !important;
    left: 50% !important;
    transform: translate(-50%, 0); */
border: 1px solid !important;
    border-color: white !important;
  background-color: rgba(20,20,21,0.95) !important;
  color:#fff;
  min-width: 500px;
    max-height: 250px !important;
  z-index: 500 !important;
    overflow-y: scroll !important;
}
/* Links inside the dropdown */
.dropdown-content a {
  padding: 8px 16px;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<div class="dropdown">
  <button onclick="myFunction(this);" class="dropbtn">My Characters</button>
  <div class="dropdown-content">
    <a>{text}</a>
  </div>
</div>

<div class="dropdown">
  <button onclick="myFunction(this);" class="dropbtn">My Other Characters</button>
  <div class="dropdown-content">
    <a>{text}</a>
  </div>
</div>

Problem :

I am attempting to set up a BB code for a forum that I help run.

I am using the following code to create a drop down box that users can put in the signature field of their user profiles:

<!DOCTYPE html>
<html>
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">My Characters</button>
  <div id="myDropdown" class="dropdown-content">
    <a>{text}</a>
  </div>
</div>
<head>
<style>
/* Dropdown Button */
.dropbtn {
    border: 1px dotted !important;
  background-color: #1b1b1b;
  border-color:white !important;
  color: white;
min-width: 500px !important;
  font-size: 16px;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: Black;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
display: inline-block;
position: relative;
 z-index: 500 !important;
min-width: 500px !important;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
position: absolute !important;
    left: 50% !important;
    transform: translate(-50%, 0);
border: 1px solid !important;
    border-color: white !important;
  background-color: rgba(20,20,21,0.95) !important;
  min-width: 500px;
    max-height: 250px !important;
  z-index: 500 !important;
    overflow-y: scroll !important;
}
/* Links inside the dropdown */
.dropdown-content a {
  padding: 8px 16px;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
</style>
<body>
</body>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").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>
</head>
</html>

The issue is that only the first dropdown box on each page works. The others do not respond to clicks. Is there a way to get multiple dropdowns to work simultaneously, without directly referencing each drop down in the code?

Comments

Comment posted by event delegation

Have you tried using

By

Related Post

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022

[ANSWERED] html – Child div has an offset border

Nov 20, 2022