I'm currently in the process of setting up a BB code for a forum I moderate.
Here's the code snippet I'm using to generate a dropdown box that users can add to the signature field of their 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;
}
...
The issue I'm facing is that only the first dropdown box on each page is functioning properly. The rest are unresponsive to clicks. Is there a way to enable multiple dropdowns to work simultaneously without directly mentioning each one in the code?