How to use single function for dropdown JavaScript?

Question

I'm making a dropdown on my site, but I stumble on a problem: The dropdown is working for one part. I have a "Tools"-button, and when clicked, it will show 3 underlying options. Now I'm trying to add the same option under "Tools". How do I do this? I tried copying it, but as expected, it opens the "Tools"-options.

    /* 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 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-content {
      display: none;
      min-width: 160px;
      min-height:70px;
      overflow: hidden;
      z-index: 1;
    }
    .dropdown-content li a {
      text-decoration: none;
      display: block;
    }
    .show {display: block;}

    <button button onclick="myFunction('myDropdown')" class="dropbtn">Tools</button>
      	<div id="myDropdown" class="dropdown-content">
        		<li class="force-css"><a href="#">Blok 1</a></li>
        		<li class="force-css"><a href="#">Blok 2</a></li>
        		<li class="force-css"><a href="#">Blok 3</a></li>
      	</div>
                          
    <button button onclick="myFunction('myDropdown')" class="dropbtn">Bouw</button>
      	<div id="myDropdown" class="dropdown-content">
        		<li class="force-css"><a href="#">Blok 1</a></li>
        		<li class="force-css"><a href="#">Blok 2</a></li>
        		<li class="force-css"><a href="#">Blok 3</a></li>
      	</div>

Also, is there a way to just make the function once, and modify the html/css to show the corresponding list? Thanks!

Answer 1

There were two issues :

• you had two divs with the same ID. HTML element's IDs need to be unique in your Document Object Model, or you're going to have issues when dealing with said elements.
• your myFunction function wasn't using the id of the dropdown, passed as a parameter. So, it was linked with the same element whose id was "myDropdown"

I fixed both issues in the snippet below :

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction(dropDownId) {
        document.getElementById(dropDownId).classList.toggle("show");
    }
    
    // Close the dropdown 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-content {
      display: none;
      min-width: 160px;
      min-height:70px;
      overflow: hidden;
      z-index: 1;
    }
    .dropdown-content li a {
      text-decoration: none;
      display: block;
    }
    .show {display: block;}

<button button onclick="myFunction('myDropdown1')" class="dropbtn">Tools</button>
      	<div id="myDropdown1" class="dropdown-content">
        		<li class="force-css"><a href="#">Tools 1</a></li>
        		<li class="force-css"><a href="#">Tools 2</a></li>
        		<li class="force-css"><a href="#">Tools 3</a></li>
      	</div>
                          
    <button button onclick="myFunction('myDropdown2')" class="dropbtn">Bouw</button>
      	<div id="myDropdown2" class="dropdown-content">
        		<li class="force-css"><a href="#">Bouw 1</a></li>
        		<li class="force-css"><a href="#">Bouw 2</a></li>
        		<li class="force-css"><a href="#">Bouw 3</a></li>
      	</div>