My parent dropdowns are working perfectly. Like 1 open and when i click on 2nd the first one closes. But this is not working for submenus. All Submenu can be opened at once. But 1 want 1 sub menu at a time to be opened
<script>
document.addEventListener('DOMContentLoaded', function () {
// Function to handle dropdown toggles
function handleDropdownToggle(toggle) {
toggle.addEventListener('click', function (event) {
event.preventDefault(); // Prevent default link behavior
var dropdownMenu = toggle.nextElementSibling;
// Toggle visibility of the dropdown menu
dropdownMenu.classList.toggle('show');
// Find the parent <li> with class .has-dropdown and add/remove the active class
var parentLi = toggle.closest('li.has-dropdown');
if (parentLi) {
if (dropdownMenu.classList.contains('show')) {
parentLi.classList.add('active-dropdown');
parentLi.classList.remove('closed-dropdown');
} else {
parentLi.classList.remove('active-dropdown');
parentLi.classList.add('closed-dropdown');
}
}
// Close other dropdown menus
var otherDropdownMenus = document.querySelectorAll('.dropdown-menu.show');
otherDropdownMenus.forEach(function (menu) {
if (menu !== dropdownMenu) {
menu.classList.remove('show');
// Also remove the active class and add the closed class from other parent <li> elements
var otherParentLi = menu.closest('li.has-dropdown');
if (otherParentLi) {
otherParentLi.classList.remove('active-dropdown');
otherParentLi.classList.add('closed-dropdown');
}
}
});
});
}
// Assuming you want to attach this to multiple toggles, you might do something like this:
document.querySelectorAll('.dropdown-toggle').forEach(function(toggle) {
handleDropdownToggle(toggle);
});
// Get all dropdown toggles
var dropdownToggles = document.querySelectorAll('.has-dropdown > .nav-link');
// Add click event listener to each dropdown toggle
dropdownToggles.forEach(handleDropdownToggle);
// Get all submenu toggles
var submenuToggles = document.querySelectorAll('.dropdown-item > .nav-link');
// Add click event listener to each dropdown toggle
// Add click event listener to each submenu toggle
submenuToggles.forEach(function (toggle) {
toggle.addEventListener('click', function (event) {
var dropdownMenu = toggle.closest('.dropdown-menu');
dropdownMenu.classList.add('show');
// Close other dropdown menus
var otherDropdownMenus = document.querySelectorAll('.dropdown-menu.show');
otherDropdownMenus.forEach(function (menu) {
if (menu !== dropdownMenu) {
menu.classList.remove('show');
}
});
// Prevent event propagation to parent dropdown
event.stopPropagation();
});
});
});
</script>
I added a code above. I tried many thing from chatgpt but nothing work.
I am trying from past 5 hours but nothing works as I want.