Is there a way to have multiple dropdowns on one page?-CodePudding

I wanted to put a lot of dropdowns on one page, and I could easily get them there. The problem is that when I click on the second one, it displays what's on the first, despite having different contents. Is there a solution for this?

Code because it wouldn't fit here: https://jsfiddle.net/ne720zps/

CodePudding user response：

Send the button that was clicked to myFunction. Get the appropriate dropdown from the button's relative position to that dropdown (the dropdown is the next element after the button in your code). Delete the duplicated IDs on the dropdown divs.

<button onclick="myFunction(this)">

and

function myFunction(button) {
  // the dropdown is the next element after the button that was clicked
  button.nextElementSibling.classList.toggle("show");
}

CodePudding user response：

Here's a restructuring of that HTML, with ID tags removed and an example on how to target elements based on their proximity/relationship to the button.

// let the page load...
document.addEventListener('DOMContentLoaded', () => {
  // assign the button click
  document.querySelectorAll('.dropbtn').forEach(btn => {
    btn.addEventListener('click', e => {
   
      // first close all
      document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'))
      // open the one you want which is CLOSEST
      e.target.closest('.dropdown').querySelector('.dropdown-content').classList.add('show');
      
      
    })
  })

  // catch the click outside
  document.addEventListener('click', e => {
  if (e.target.classList.contains('dropbtn')) return;
    document.querySelectorAll('.dropdown-content').forEach(div => div.classList.remove('show'))
  })



})

body {
  background: black;
  color: white;
}

.dropbtn {
  background-color: #ffffff;
  color: black;
  padding: 10px;
  font-size: 20px;
  border: none;
  cursor: pointer;
  width: auto;
  margin-bottom: 0;
  font-weight: 600;
}


/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background: linear-gradient(90deg, #00ffa8, #2300ff);
  color: white;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  display: inline-block;
  text-align: center;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  text-align: left;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  width: 30%;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
  background: white;
}


/* 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;
}

#center {
  text-align: center;
}

<div >
  <div >
    <button >Embedded Browser</button>
    <div >
      <b><i>Unblocked browser that won’t show up in your history. Doesn’t work with a lot of websites, so you can mostly just search.
</i></b>
    </div>
  </div>
</div>
<div >
  <div >
    <button >Fullscreen Browser</button>
    <div >
      <b><i>Same as the last one, but takes up your whole screen.
</i></b>
    </div>
  </div>
</div>