Help adding 2nd Dropdown

[Tim Jordan]

Hi,

I was able to implement this clickable dropdown once into my page: https://www.w3schools.com/howto/howto_js_dropdown.asp

However, when trying to add it to a second page it doesn't seem to work.

For background my page is 1 html file that is divided into article sections. In 1 section I was able to put this in and have it work for that articles page. However, when doing it for another article section although the button shows up, its clickable functions don't work. I click but nothing happens. I copied and pasted the code from the other article section there and changed the options to reference the things on the page i wanted them to jump to, so it is still calling the proper script and using the same css styling, but it doesn't drop down and show me the options.

Also if I comment out the other article section's dropdown, then the 2nd page works, but otherwise it does not.

Could someone please point out what I am missing and why it works on the one page still but not the other.

 

[shaili_shah]

If you are coping that code same for other dropdown then use the different id for both dropdown.

You don't need to add different css but in javascript you should add other code also or try using target element.

Implement here : 

document.getElementById("myDropdown").classList.toggle("show");

Hope it'll help you.

Thanks!

[dsonesuk]

Add 'this' as argument in Myfunction, this will now represent the element that triggered the event, in function add 'elem' parameter to represent the passed argument, then use nextElementSibling to move to next element (sibling). This is now not to a specific id reference which must be unique, but to triggering event element next sibling element.

https://www.w3schools.com/code/tryit.asp?filename=GH331JJASJPU

Edited July 24, 2020 by dsonesuk