Struggling to create a practice menu with the functionality of making elements appear and disappear on click? If you are encountering issues with a class named "option" not working as expected, you are not alone. Clicking on nested objects like images or icons might throw errors related to undefined properties. Despite logging the outerHTML of the clicked object successfully, adding a class becomes problematic. As a beginner in web development, any guidance, even if it only points me in the right direction, is greatly appreciated:)
let counter = 0;
const icon = document.querySelector('.dropdown-arrow');
const allIcon = document.querySelectorAll('.dropdown-arrow');
const options = document.querySelectorAll(".option");
const foodItem = document.querySelectorAll('.food-item')
const optionContainer = document.querySelectorAll('.option-container');
options.forEach(function(option) {
option.addEventListener("click", function(event) {
let element = event.target;
let currentArrow = element.getElementsByTagName('ion-icon')[0];
if (counter == 0) {
// ARROW CLASS FUNCTIONALITY ON CLICK
console.log(currentArrow.outerHTML);
currentArrow.classList.add('rotate-on');
currentArrow.classList.remove('rotate-off');
counter++;
//MENU DESC. FUNCTIONALITY
foodItem.forEach(function(food) {
food.classList.remove('hidden');
})
} else {
// ARROW CLASS FUNCTIONALITY ON CLICK
currentArrow.classList.add('rotate-off');
currentArrow.classList.remove('rotate-on');
counter--;
//MENU DESC. FUNCTIONALITY
foodItem.forEach(function(food) {
food.classList.add('hidden');
})
}
});
});.rotate-on {
transform: rotate(-180deg);
transition: all .3s;
}
.rotate-off {
transform: rotate(0deg);
transition: all .3s;
}
.hidden {
display: none;
}<section class = "section section-menu">
<!-- Including dummy content for clarity -->
</section>