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.

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.

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!!!!!!!

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/test.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!!!!!!!