Hi I've created a dropdown menu where i have a list of products with a coloured icon beside each. What I'm trying to achieve is when a user selects a product from the dropdown, the selected product will replace the "Choose Option" copy at the start of the dropdown. This also needs to include the coloured icon associated with that product.
So far I've added a "activeProduct" class to the selected product when a user selects a product, but not sure how to use this information to then replace the "Choose Option" copy.
// Add the class activeProduct to selected product
var buttonSelector = document.querySelectorAll('li.product');
buttonSelector.forEach(function(el) {
el.addEventListener("click", function(ev) {
buttonSelector.forEach(function(button) {
button.classList.remove('activeProduct');
});
this.classList.add('activeProduct');
});
});
// Toggle the Choose Option dropdown
var selectDropdown = document.querySelector('.selectDropdown');
var toggleProduct = document.querySelector('ul');
selectDropdown.addEventListener('click', function() {
if (toggleProduct.classList.contains('active')) {
toggleProduct.classList.remove("active");
toggleProduct.classList.add("disable");
} else {
toggleProduct.classList.remove("disable");
toggleProduct.classList.add("active");
}
});.selectDropdown {
border: 1px solid black;
}
ul {
max-height: 0;
overflow: hidden;
display: block;
padding: 0;
}
li.product {
list-style: none;
}
li.product::before {
height: 10px;
width: 10px;
content: "";
display: inline-flex;
margin: 0 10px;
}
li.product.product1::before {
background: yellow;
}
li.product.product2::before {
background: pink;
}
li.product.product3::before {
background: orange;
}
li.product.product4::before {
background: red;
}
.activeProduct {
background: yellow;
}
.active {
max-height: 100%;
}
.disable {
max-height: 0;
}<div class="container">
<div class="selectDropdown">Choose Option</div>
<ul>
<li class="product product1">Product 1</li>
<li class="product product2">Product 2</li>
<li class="product product3">Product 3</li>
<li class="product product4">Product 4</li>
</ul>
</div>