We Keep Coding

JavaScript Accordion not working when i click on accordion heading text or chevron icon

I have built an accordion which I can add dynamically from an input and everything works fine except when I click on accordion heading text it doesn't work and also when I click on the chevron icon on the right side I get an error!! I am not sure why this happening. if I click on an empty space area it just works fine without any error. you can check the demo & code here on codepen -> https://codepen.io/tauhidul-islam/pen/eYZBzLY
Also here is some screenshot so you can understand. please let me understand what's happening and why. Thank you.
const addForm = document.querySelector(".add");
const list = document.querySelector(".section-list");
// Template Generator Function
const generateTemplate = (section) => {
let html = `
<div class="accordion">
<span>${section}</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="panel">
<span>Hey there you did it! :-)</span>
</div>
`;
list.innerHTML += html;
// accordion Selector
const accordion = document.querySelectorAll(".accordion");
// Show/Hide accordion Content on Click
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", (e) => {
let panel = e.target.nextElementSibling;
if (panel.classList.contains("panel")) {
panel.classList.toggle("active");
}
});
}
};
// Add Section
addForm.addEventListener("submit", (e) => {
e.preventDefault();
const section = addForm.add.value.trim();
if (section.length) {
generateTemplate(section);
addForm.reset();
}
});
.container {
width: 960px;
margin: auto;
}
.add-input {
padding: 15px;
border: 1px solid #dadada;
}
.add-btn {
background: white;
padding: 15px 25px;
margin-bottom: 10px;
border: 1px solid #dadada;
cursor: pointer;
}
/* Accordian Panel */
.accordion {
display: flex;
justify-content: space-between;
background: #03a9f4;
color: white;
padding: 15px;
box-shadow: 0px 0px 4px 0px #dadada;
cursor: pointer;
}
.panel {
display: none;
background-color: white;
padding: 15px;
}
.active {
display: block;
}
<div class="container">
<!-- Add Section -->
<form class="add">
<input type="text" name="add" class="add-input">
<button type="submit" class="add-btn">Add Section</button>
</form>
<!-- Section List -->
<div class="section-list"></div>
</div>

Because you are using e.target in the click event of the generated div, that will reference the template span when you click on the text and the div when you click on the blue bar, so .nextElementSibling won't always point to the same element. Instead, you want to always be calling .nextElementSibling on the div. This can be accomplished by using this.nextElementSibling, however because you are also using an arrow function, this binding won't correctly reference the element that received the event (the div), so if you change to using an anonymous function and this, it works.
const addForm = document.querySelector(".add");
const list = document.querySelector(".section-list");
// Template Generator Function
const generateTemplate = (section) => {
let html = `
<div class="accordion">
<span>${section}</span>
<i class="fa fa-chevron-down">^</i>
</div>
<div class="panel">
<span>Hey there you did it! :-)</span>
</div>
`;
list.innerHTML += html;
// accordion Selector
const accordion = document.querySelectorAll(".accordion");
// Show/Hide accordion Content on Click
for (i = 0; i < accordion.length; i++) {
// Use an anonymous function for the event listener so that
// "this" will bind to the element that recieved the event,
// which is the `div` in this case.
accordion[i].addEventListener("click", function(e) {
// We don't want to reference the element that triggered the event
// because that might be the span or the div and you won't always get
// the correct reference with .nextElementSibling. We always want to
// start from the div, which recieves the event.
let panel = this.nextElementSibling;
if (panel.classList.contains("panel")) {
panel.classList.toggle("active");
}
});
}
};
// Add Section
addForm.addEventListener("submit", (e) => {
e.preventDefault();
const section = addForm.add.value.trim();
if (section.length) {
generateTemplate(section);
addForm.reset();
}
});
.container {
width: 960px;
margin: auto;
}
.add-input {
padding: 15px;
border: 1px solid #dadada;
}
.add-btn {
background: white;
padding: 15px 25px;
margin-bottom: 10px;
border: 1px solid #dadada;
cursor: pointer;
}
/* Accordian Panel */
.accordion {
display: flex;
justify-content: space-between;
background: #03a9f4;
color: white;
padding: 15px;
box-shadow: 0px 0px 4px 0px #dadada;
cursor: pointer;
}
.panel {
display: none;
background-color: white;
padding: 15px;
}
.active {
display: block;
}
<div class="container">
<!-- Add Section -->
<form class="add">
<input type="text" name="add" class="add-input">
<button type="submit" class="add-btn">Add Section</button>
</form>
<!-- Section List -->
<div class="section-list"></div>
</div>

Without the loop for assigning the click handlers:
const addForm = document.querySelector(".add");
const list = document.querySelector(".section-list");
const expand = (element) => {
let panel = element.nextElementSibling;
if (panel.classList.contains("panel")) {
panel.classList.toggle("active");
}
};
// Template Generator Function
const getAccordionItem = (section) => {
let html = `
<div class="accordion" onclick="expand(this)">
<span>${section}</span>
<i class="fa fa-chevron-down"></i>
</div>
<div class="panel">
<span>Hey there you did it! :-)</span>
</div>
`;
return html;
};
// Add Section
addForm.addEventListener("submit", (e) => {
e.preventDefault();
const section = addForm.add.value.trim();
if (section.length) {
list.innerHTML += getAccordionItem(section);
addForm.reset();
}
});
body {
margin: 50px 0;
background-color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
}
.container {
width: 960px;
margin: auto;
}
.add-input {
padding: 15px;
border: 1px solid #dadada;
}
.add-btn {
background: white;
padding: 15px 25px;
margin-bottom: 10px;
border: 1px solid #dadada;
cursor: pointer;
}
/* Accordian Panel */
.accordion {
display: flex;
justify-content: space-between;
background: #03a9f4;
color: white;
padding: 15px;
box-shadow: 0px 0px 4px 0px #dadada;
cursor: pointer;
}
.panel {
display: none;
background-color: white;
padding: 15px;
}
.active {
display: block;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Accordian</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- Add Section -->
<form class="add">
<input type="text" name="add" class="add-input">
<button type="submit" class="add-btn">Add Section</button>
</form>
<!-- Section List -->
<div class="section-list"></div>
</div>
<script src="app.js"></script>
</body>
</html>

onClick JS not go to top of the page

I have a page with an initial description, followed by 2 buttons, where the user can choose typeA or typeB. They work by "target": when the user clicks typeA comes the content relative to typeA, bellow the buttons; same to typeB.
typeA is the most common selection, then, when the page loads, a javascript emulates the click to typeA and opens respective content. To avoid hidden the initial description, there is another javascript to put the page at the top. Worked on Chrome and Edge, not on Firefox.
I would like to repeat the same process when the user clicks: opens the respective content, but positioning the page at the top, or, at least, showing the buttons. I thought event onClick calling the same js backToTop would worked - but not.
I put an alert on js and enters there but not execute: always keeps the content of the button selected in its better visibility.
I tried:
window.location.href = '#top';
window.scrollBy(0, -500);
document.html.scrollTop = document.documentElement.scrollTop = 0;
without success.
What am I doing wrong?
<head>
<meta charset="UTF-8">
<title>TOP PAGE TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html {margin-left:auto; margin-right:auto;width:70%; font-family:verdana; font-size:1.2em;}
.menuFAQ {background:#aaa; font-size:2em; width:100%;}
.menuFAQ ul {list-style-type:none; position:relative; margin-left:-40px; /* to avoid user agent chrome */}
.menuFAQ li {display:inline-block; margin-top:10px; margin-bottom:10px; width:49%; background:#fff; text-align:center; box-shadow:2px 3px 4px 0px rgba(170,170,170,1); font-weight:400; line-height:80px;}
.menuFAQ li a {display:block; color:#020062; background:#fff; font-weight:400; text-decoration:none;}
.menuFAQ li .active,.menuFAQ li:hover a {color:#fff; font-weight:400; background-image:linear-gradient(#165686, #0f3a5a); }
:target {color:#fff;font-size:1em;}
div.items>div:not(:target) {display:none}
div.items>div:target {display:block; margin-left:auto; margin-right:auto; color:#000; border:1px solid #aaa;}
</style>
</head>
<body>
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p><p>text2B</p><p>text3B</p>
<br>[...]
</nav>
</div>
</div>
<script>
const allTargetLinks = document.querySelectorAll('.target')
allTargetLinks.forEach(targetLink => {
targetLink.addEventListener('click', () => {
allTargetLinks.forEach(targetLink => {
targetLink.classList.remove('active')
})
targetLink.classList.add('active')
})
})
window.onload = function() {assignPreferedFAQ()};
function assignPreferedFAQ() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
//document.html.scrollTop = document.documentElement.scrollTop = 0;
//document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>

You had a real mess there regarding how you process click events and href attribute, i.e:
You had onclick attribute on your links, and you were adding yet another listener to them in JS
You didn't event.preventDefault() in your function, and default browser behavior when you click on a link is to get you to its href path
I've cleaned up a bit and changed some things. Since we need to prevent default behavior :target selector will no longer work, so instead I did what you've already been doing with links, and added an active class to your content. clickHandler() will now remove and add class active as necessary. At the end just scroll to the top. Here's the snippet:
document.querySelectorAll('.target').forEach(targetLink => targetLink.addEventListener('click', clickHandler, false));
function clickHandler(ev) {
ev.preventDefault(); // prevent browser from automatically scrolling to href pos
if (!ev.currentTarget.classList.contains('active')) {
// disable active elements
document.querySelector('.target.active').classList.remove('active');
document.querySelector('.items div.active').classList.remove('active');
// add class to the clicked on button and its corresponding content tab
ev.currentTarget.classList.add('active');
// to prevent pointless string slicing below, you'd have to store ids somewhere else i.e in the data-id attribute
const id = ev.currentTarget.href.slice(ev.currentTarget.href.lastIndexOf('#') + 1);
document.getElementById(id).classList.add('active');
}
window.scrollTo(0,0);
}
* {
font-family: verdana;
font-size: 1em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
text-align: center;
padding: 0;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
width: 48%;
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
div.items>div {
display: none;
}
div.items>div.active {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a class="target active" href="#typeA">TypeA</a></li>
<li><a class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div class="active" id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</div>
Note that instead of artificially clicking at the page load, now your content just loads with class active.

Hope this help you.
< script >
window.onload = function() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
//alert("enter backToTop");
var elmnt = document.getElementById("top");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
}; <
/script>
body,
html {
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: verdana;
font-size: 1.2em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
position: relative;
margin-left: -40px;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 49%;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
:target {
color: #fff;
font-size: 1em;
}
div.items>div:not(:target) {
display: none
}
div.items>div:target {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div> <br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5<br>textExp6<br>textExp7<br>textExp8<br>textExp9<br>textExpA<br>textExpB<br>textExpC<br>textExpD
<br>textExpE
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</di

Close the dropdown menu if the user clicks on the second dropdown link

I have a navigation bar with multiple drop downs. So when I click on the first link it opens the drop down, but when I click on the second link, the first drop down doesn't close. (so I want to close the drop down menu if the user clicks on second link)
// main.js (javascript file)
function myFunction() {
var x = document.getElementById("myTopnav1");
if (x.className === "topnav1") {
x.className += " responsive1";
} else {
x.className = "topnav1";
}
}
function toggleDropDown(myid) {
var element = document.getElementById(myid);
element.classList.toggle("mystyle");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle')) {
openDropdown.classList.remove('mystyle');
}
}
}
}
/* style.css (css file - css is all correct if anything you think is not added i only need help with javascript) */
.topnav1 {
background-color: blue !important;
}
/* Style the links inside the navigation bar */
.topnav1 a {
float: left;
display: block;
color: black;
text-align: center;
padding: 4px 8px;
text-decoration: none;
font-size: 10px;
border-bottom: 1px solid #FDFDFD;
}
.topnav-right1 {
float: right;
}
#media only screen and (max-width:768px) {
.topnav-right1 {
float: left;
}
}
.para-active {
background-color: #4F7ADA !important;
color: black !important;
}
.para-active button {
color: white !important;
}
/* Add an active class to highlight the current page */
.active1 {
color: black !important;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav1 .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown1 {
float: left;
overflow: hidden;
background-color: #f1f1f1;
border-bottom: 1px solid #E3E3E3;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown1 .dropbtn1 {
font-size: 10px;
border: none;
outline: none;
color: black;
padding: 4px 8px;
background-color: inherit;
font-family: inherit;
margin: 0;
border-bottom: 1px solid #FDFDFD;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 96px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.mystyle {
display: block;
}
<div class="topnav1" id="myTopnav1">
<div class="dropdown1">
<button style="display: none;" id="btn_em" onclick="toggleDropDown('div_em')" class="dropbtn1">Meters
</button>
<div class="dropdown-content1" id="div_em">
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inv" onclick="toggleDropDown('div_inv')" class="dropbtn1">Inverters
</button>
<div class="dropdown-content1" id="div_inv">
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inm" onclick="toggleDropDown('div_inm')" class="dropbtn1">Inverter Manager
</button>
<div class="dropdown-content1" id="div_inm">
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_ws" onclick="toggleDropDown('div_ws')" class="dropbtn1">Sensors
</button>
<div class="dropdown-content1" id="div_ws">
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_smu" onclick="toggleDropDown('div_smu')" class="dropbtn1">SMUs
</button>
<div class="dropdown-content1" id="div_smu">
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label> </div>
</div>
☰
</div>

If you want to do the functionality with JavaScript, you have to use ids in order to close the other dropdowns, once a new one is open.
So, the solution I've worked on is creating a new method closeMenus, which will close the other dropdowns once you execute toggleDropDown.
function myFunction() {
var x = document.getElementById("myTopnav1");
if (x.className === "topnav1") {
x.className += " responsive1";
} else {
x.className = "topnav1";
}
}
function toggleDropDown(myid) {
closeMenus(myid);
var element = document.getElementById(myid);
element.classList.toggle("mystyle");
}
function closeMenus(currentId) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle') && openDropdown.id !== currentId) {
openDropdown.classList.remove('mystyle');
}
}
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
closeMenus();
}
}
.topnav1 {
background-color: blue !important;
}
/* Style the links inside the navigation bar */
.topnav1 a {
float: left;
display: block;
color: black;
text-align: center;
padding: 4px 8px;
text-decoration: none;
font-size: 10px;
border-bottom: 1px solid #FDFDFD;
}
.topnav-right1 {
float: right;
}
#media only screen and (max-width:768px) {
.topnav-right1 {
float: left;
}
}
.para-active {
background-color: #4F7ADA !important;
color: black !important;
}
.para-active button {
color: white !important;
}
/* Add an active class to highlight the current page */
.active1 {
color: black !important;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav1 .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown1 {
float: left;
overflow: hidden;
background-color: #f1f1f1;
border-bottom: 1px solid #E3E3E3;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown1 .dropbtn1 {
font-size: 10px;
border: none;
outline: none;
color: black;
padding: 4px 8px;
background-color: inherit;
font-family: inherit;
margin: 0;
border-bottom: 1px solid #FDFDFD;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 96px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.mystyle {
display: block;
}
<div class="topnav1" id="myTopnav1">
<div class="dropdown1">
<button style="display: none;" id="btn_em" onclick="toggleDropDown('div_em')" class="dropbtn1">Meters
</button>
<div class="dropdown-content1" id="div_em">
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inv" onclick="toggleDropDown('div_inv')" class="dropbtn1">Inverters
</button>
<div class="dropdown-content1" id="div_inv">
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inm" onclick="toggleDropDown('div_inm')" class="dropbtn1">Inverter Manager
</button>
<div class="dropdown-content1" id="div_inm">
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_ws" onclick="toggleDropDown('div_ws')" class="dropbtn1">Sensors
</button>
<div class="dropdown-content1" id="div_ws">
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_smu" onclick="toggleDropDown('div_smu')" class="dropbtn1">SMUs
</button>
<div class="dropdown-content1" id="div_smu">
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label> </div>
</div>
☰
</div>

I assume that your mystyle class makes the dropdown active.
Then you can do something like this
// Get all the dropdowns
var dropdowns = document.getElementByClassName(".dropdown1")
// When clicked on dropdown this function will fire
var callThisFunction = function (e) {
// Check the event
e = e || window.event;
// Get the target element
let target = e.target || e.srcElement;
// Close all dropdowns
let activeDropdowns = document.getElementsByClassName("mystyle");
activeDropdowns.forEach(function (openDropdown) {
openDropdown.classList.remove('mystyle');
})
// Make the current dropdown active
target.className += 'mystyle'
}
// This adds click event listener to all dropdowns and tells it to fire callThisFunction when clicked
dropdowns.forEach(function (dropdown) {
dropdown[i].addEventListener('click', callThisFunction, false);
})

I suggest you use JQUERY (CDN BELOW)
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js
Jquery is super fast and helpful
because your problem will be solved like this in jquery.
$('.yourdropdownsclass').on('click', function(){
var target = $(this).attr('id');
$("#"+target).show().siblings("div").hide();
});
.yourdropdownclass
is class of your dropdowns
$(this).attr('id')
this is getting the ids of another dropdowns.
$("#"+target).show().siblings("div").hide();
"target" is the name of ids of other dropdowns and storing it to variable and showing it and hiding another sibling's dropdowns.
I hope it will help you!

Creating a drop-down menu in Javascript - Nothing showing on canvas

I'm attempting to create a drop-down menu in javascript, html and css however when I run the code nothing is showing on canvas. Is it because the files aren't communicating with each other correctly?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>DropdownMenu</title>
<link rel='stylesheet' type='text/css' href='Stylesheetdropdown.css'/>
</head>
<body>
<canvas id="canvas" width="5000" height="5000">
</canvas>
<script type='text/javascript' src='DropdownMenu.js'></script>
</body>
<body>
<div class = "dropdown">
<button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
<div id = "myMenu" class = "drpdwncntnt">
<p>100</p>
<p>200</p>
<p>300</p>
</div>
</div>
</body>
</html>
Javascript:
function dropdown() {
document.getElementById("myMenu").classList.toggle("show");
}
window.onclick = function (event) {
if (!event.target.matches('.drpdwnbtn')) {
var dropdowns = document.getElementsByClassName("drpdwncntnt"),
i,
openDropdown = dropdowns[i];
for (i = 0; i < dropdowns.length; i += 1) {
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
CSS:
.drpdwnbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.drpdwnbtn:hover, .drpdwnbtn:focus {
background-color: #E0FFFF;
}
.dropdown {
position: relative;
display: inline-block;
}
.drpdwncntnt {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.drpdwncntnt a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}

Your canvas was over your menu div, your html should look like:
<div class = "dropdown">
<button onclick = "dropdown()" class = "drpdwnbtn">Menu</button>
<div id = "myMenu" class = "drpdwncntnt">
<p>100</p>
<p>200</p>
<p>300</p>
</div>
</div>
<canvas id="canvas" width="5000" height="5000">
</canvas>
, so here is a working fiddle:
https://jsfiddle.net/ahpook4p/

bootstrap dropdown select default value not working

i m using bootstrap dropdown menu
$(".dropdown-menu li a").on('click',function(){
var selText = $(this).text();
$(this).parents('.dropdown').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
$(".default_option").remove();
$(".dropdown-menu").prepend("<li class='default_option'><a>Kies behandeling</a></li>");
});
#treatment-modal .caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
#treatment-modal .dropdown-menu>li>a {
display: inline-block;
padding: 12px;
clear: both;
font-weight: 400;
line-height: 1;
color: #333;
white-space: nowrap;
width: 100%;
cursor: pointer;
}
#treatment-modal .dropdown-menu li {
margin: 0;
padding: 0;
line-height: 0;
}
#treatment-modal button.btn.btn-default.dropdown-toggle {
margin: 5px 0 0;
text-align: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="treatment-modal">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Kies behandeling<span class="caret"></span></button>
<ul class="dropdown-menu treatment-select">
<li>
<a value="37"><span class="pull-left">hair wash and treatment (60min)</span><span class="pull-right">€30.00</span></a>
</li>
</ul>
</div>
</div>
When i m trying to select option it is working properly and showing me as replacement of the text of drop-down LIKE CONVENTIONAL SELECT DROP-DOWN
But when i try to prepend some value in dropdown than i click on that prepended value at that time default selection not working.
Looking for Help.

The default element is added dynamically to the menu so you need to edit the .on() function for the new element to bind properly.
$(document).on('click', ".dropdown-menu li a", function() {
var selText = $(this).text();
$(this).parents('.dropdown').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
$(".default_option").remove();
$(".dropdown-menu").prepend("<li class='default_option'><a>Kies behandeling</a></li>");
});
check fiddle here