Side by Side clickable dropdowns - only one working

[HKellner]

Hi, I used the W3S "how to create a dropdown", but that exercise only ever includes one button dropdowns and I want at least two side by side. I set up my page for this forum question: https://zandkantiques.com/multiple-click-drop-down.html

Please note the buttons show up on mobile devices only, so you have to be inspecting the page as a phone. Here is the code I'm using for the buttons:

<!--mobile nav-->
        <div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Fiesta Colors&nbsp;&#x25BE;</button>
        
        <div id="myDropdown" class="dropdown-content">
    <a href="#" target="_blank">Red&nbsp;&raquo;</a>
    <a href="#"  target="_blank">Yellow&nbsp;&raquo;</a>
    <a href="#" target="_blank">Blue&nbsp;&raquo;</a>
    <a href="#" target="_blank">Ivory&nbsp;&raquo;</a>
    <a href="#" target="_blank">Green&nbsp;&raquo;</a>
    <a href="#" target="_blank">Turquoise&nbsp;&raquo;</a>
    <a href="#">'50s Colors&nbsp;&raquo;</a>
    <a href="#" target="_blank">Medium Green&nbsp;&raquo;</a>        
  </div>
        </div>
        
        <div class="dropdown">
          <button onclick="myFunction()" class="dropbtn">Pottery Lines&nbsp;&#x25BE;</button>
        <div id="myDropdown" class="dropdown-content">
    <a href="#" target="_blank">Fiesta Kitchen Kraft&nbsp;&raquo;</a>
    <a href="#"  target="_blank">HLC Harlequin&nbsp;&raquo;</a>
    <a href="#" target="_blank">HLC Riviera&nbsp;&raquo;</a>
    <a href="#" target="_blank">HLC Decalware&nbsp;&raquo;</a>
  </div>
    </div>
 

and the JS that was included from the lesson:

        
    <script type="application/javascript">
/* 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;
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>    

 

I don't think the css has anything to do with my problem, so am not including any css here.

Thanks a zillion in advance!!!!!!!

 

 

[Ingolme]

You need to understand what the code is doing. When you click on a button, it searches for an element with ID "myDropdown". Now you have two of them so it doesn't know which one to choose.

If you have been learning the Javascript language through the tutorials, it shouldn't be too difficult to figure out a way to make it work for more than one dropdown. I'll leave that as an exercise to you, give it a try and show me what code you come up with.

 

You already had a topic for this. Please keep it to one topic per question. I will be locking that once since I've answered this one.

 

Edited April 29, 2020 by Ingolme

[HKellner]

Well I was really helping to get some help on this forum, not be sent go through the entire javascript tutorials. I did look through them, but it's not really a language I understand. That's why I asked for help. Even a link to the right section or a page that does what I'm asking to do. I was surprised there wasn't another example that showed a simple side by side example like this. Most templates and examples for dropdowns that I've seen put everything into one single hamburger icon or have single links with one drop down or multiple nested dropdowns that get very complicated. This looked really simple to try and implement. I'm not using templates, wordpress, squarespace, I'm an artist that has been hand coding their own website for decades. I design websites, but don't code them and build them fully, so a little help would be great. We can't all be masters at everything. I waited two days to get approved to get on these forums and this is my first post. (the duplicate came as a guest or something because the account was taking so long to verify). Anyway, help would be appreciated.

[Ingolme]

The primary purpose of W3Schools is to teach people how to write code, not just to give snippets that you can copy and paste without trying to understand it. My personal goal on the forums is to teach people, not to do work for them. Since it seems you don't intend to learn and in this scenario the solution to your problem is not too time-consuming I can take the time to write out the necessary code changes for you.

While it's not the optimal solution, the easiest way to fix this is to give a unique ID to each dropdown and pass the ID of the element you want to show as an argument to the function. Inside the function you would find the correct dropdown using its ID and then show or hide it.

First dropdown

<div class="dropdown">
  <button onclick="toggleDropdown('dropdown1')" class="dropbtn">Fiesta Colors ▾</button>
  <div id="dropdown1" class="dropdown-content">
    <a href="#" target="_blank">Red »</a>
    ...
    ...
    ...

Second dropdown

<div class="dropdown">
  <button onclick="toggleDropdown('dropdown2')" class="dropbtn">Pottery Lines ▾</button>
  <div id="dropdown2" class="dropdown-content">
    <a href="#" target="_blank">Fiesta Kitchen Kraft »</a>
    ...
    ...
    ...

Dropdown event handler

function toggleDropdown(id) {
  document.getElementById(id).classList.toggle("show");
} 

 

[HKellner]

Thank you. It's very insulting that you say I don't intend to learn. That's like telling someone who wants to learn to change the oil in their car to read an entire manual on engine maintenance. And to say I don't know anything is to look over the fact that I do know html and css and both pretty well, including setting up mobile breakpoints, which is what I have just finished learning and it took me about 3 solid days of work to understand breakpoints with css, so there was plenty of learning right there. I know javascript is a powerful tool. I consider it pretty advanced and much harder than html/css, unfortunately it's an important part of the css/html/javascript package that delivers great results. But I know how to use a wrench and can understand the jS when someone is nice enough to help me along.