How to hide all items except the active branch on click - menu dropdown

Question

I'd like to open one node on click, and remove is-active class from others items.

at this point there is a lot of space taken up after opening a few menu items. I would like only one node to be open at a time. So it needs the is-active class to be removed from the previous sub-item after switching to another sub-item

The red square opens the item.. - Could you please help me?

 const nav = document.querySelector('.menu-primary');

// const navElement = nav.querySelectorAll('.menu-item-has-children');

const navElementIcon = nav.querySelectorAll('.js-navigation-arrow');

// console.log(navElesment);

navElementIcon.forEach(function (element) {
    element.addEventListener("click", function() {
        let elementParent = element.closest('.menu-item-has-children');


        if (elementParent.classList.contains('is-active')) {
            elementParent.classList.remove('is-active');
        } else {
            elementParent.classList.add('is-active');
        }
    });
});

.menu-primary a {
  margin-right: 30px !important;
}
.menu-primary > li {
  position: relative;
  text-align: left;
}
.menu-primary > li:first-child .menu-item a {
  margin-top: 0;
}
.menu-primary > li:nth-child(4) {
  margin-top: 0;
}
.menu-primary > li > .menu-item-icon {
  top: 7px;
}
.menu-primary > li .sub-menu {
  position: static;
  transform: none;
  display: none;
  opacity: 1;
  visibility: visible;
}
.menu-primary > li .sub-menu > .sub-menu__list > li > .sub-menu__child-list {
  padding-left: 15px;
}
.menu-primary > li > a {
  display: inline-block;
  font-size: 16px;
  margin: 8px 0;
}
.menu-primary a {
  display: inline-block;
  font-size: 14px;
}

.menu-item-icon {
  display: flex;
  width: 15px;
  height: 15px;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 7px;
  right: 0;
  font-size: 8px;
  color: #fff;
  transform: rotate(180deg);
  transition: 0.2s;
  background: red;
  z-index: 10;
}
.menu-item.is-active > .sub-menu {
   display: block;
}

.menu-item {
  position: relative;
  margin: 5px 0;
}
.sub-menu__child-list {
    display: none;
    padding-left: 15px;
}
.menu-item.is-active > .sub-menu__child-list {
    display: block;
}



    
        About Us
        
            
                Child
                
                    Nasze gabinety
                    
                        Gabinet Gocław
                        Gabinet Szczecin
                        Gabinet Ursynów
                        Gabinet Warszawa Centrum
                        Gabinet Wilanów
                    

                
                Praca
                        dla psychoterapeuty
                Współpracują z nami
            
        

    

    
        Contact
        
            
                
                    Sub item 1
                    
                        Bezpłodność
                        
                        Depresja poporodowa
                    

                
                
                    Trudności w relacji z innymi
                    
                        Wypalenie zawodowe
                        Nieśmiałość
                        Przemoc w relacji
                        Współuzależnienie
                    

                
                
                    Trudności w relacji ze sobą
                    
                        Niska samoocena
                        
                        Prokrastynacja
                        Depresja
                    

                
                
                    Dolegliwości psychiczne a zaburzenia hormonalne
                    
                        PMS
                                napięcie przedmiesiączkowe
                        Menopauza
                        
                    

                
                
                    Zaburzenia odżywiania
                    
                        Leczenie ortoreksji
                        Leczenie anoreksji
                    

                
                
                    Częste uzależnienia u kobiet
                    
                        Uzależnienie od zakupów
                        
                        Uzależnienie od pracy
                        Uzależnienie od seksu
                        Uzależnienie od leków

user_17608420 · Answer

I've made two different approaches you can follow, they are described within the code below. I hope I was helpful.

 const nav = document.querySelector('.menu-primary');

// const navElement = nav.querySelectorAll('.menu-item-has-children');

const navElementIcon = nav.querySelectorAll('.js-navigation-arrow');

// console.log(navElesment);

navElementIcon.forEach(function (element) {
    element.addEventListener("click", function() {
        let elementParent = element.closest('.menu-item-has-children');

        if (elementParent.classList.contains('is-active')) {
            elementParent.classList.remove('is-active');
        } else {
            /*
                If you just want to close active items in the same
                level that the one you're opening, use the command below.
                Example: If you click About Us -> Nasze gabinety ->
                Contact -> About Us, the Nasze gabinety is going to
                be opened yet.
            */
            // Array.from(elementParent.parentElement.children)
            //     .forEach((menuItem) => menuItem.classList.remove('is-active'));

            /*
                If you want to close all active items, use the command below.
                Example: If you click About Us -> Nasze gabinety ->
                Contact -> About Us, the Nasze gabinety is going to
                be closed.
            */
            Array.from(elementParent.parentElement.querySelectorAll('.is-active'))
                .forEach((menuItem) => menuItem.classList.remove('is-active'));

            elementParent.classList.add('is-active');
        }
    });
});

.menu-primary a {
  margin-right: 30px !important;
}
.menu-primary > li {
  position: relative;
  text-align: left;
}
.menu-primary > li:first-child .menu-item a {
  margin-top: 0;
}
.menu-primary > li:nth-child(4) {
  margin-top: 0;
}
.menu-primary > li > .menu-item-icon {
  top: 7px;
}
.menu-primary > li .sub-menu {
  position: static;
  transform: none;
  display: none;
  opacity: 1;
  visibility: visible;
}
.menu-primary > li .sub-menu > .sub-menu__list > li > .sub-menu__child-list {
  padding-left: 15px;
}
.menu-primary > li > a {
  display: inline-block;
  font-size: 16px;
  margin: 8px 0;
}
.menu-primary a {
  display: inline-block;
  font-size: 14px;
}

.menu-item-icon {
  display: flex;
  width: 15px;
  height: 15px;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 7px;
  right: 0;
  font-size: 8px;
  color: #fff;
  transform: rotate(180deg);
  transition: 0.2s;
  background: red;
  z-index: 10;
}
.menu-item.is-active > .sub-menu {
   display: block;
}

.menu-item {
  position: relative;
  margin: 5px 0;
}
.sub-menu__child-list {
    display: none;
    padding-left: 15px;
}
.menu-item.is-active > .sub-menu__child-list {
    display: block;
}



    
        About Us
        
            
                Child
                
                    Nasze gabinety
                    
                        Gabinet Gocław
                        Gabinet Szczecin
                        Gabinet Ursynów
                        Gabinet Warszawa Centrum
                        Gabinet Wilanów
                    

                
                Praca
                        dla psychoterapeuty
                Współpracują z nami
            
        

    

    
        Contact
        
            
                
                    Sub item 1
                    
                        Bezpłodność
                        
                        Depresja poporodowa
                    

                
                
                    Trudności w relacji z innymi
                    
                        Wypalenie zawodowe
                        Nieśmiałość
                        Przemoc w relacji
                        Współuzależnienie
                    

                
                
                    Trudności w relacji ze sobą
                    
                        Niska samoocena
                        
                        Prokrastynacja
                        Depresja
                    

                
                
                    Dolegliwości psychiczne a zaburzenia hormonalne
                    
                        PMS
                                napięcie przedmiesiączkowe
                        Menopauza
                        
                    

                
                
                    Zaburzenia odżywiania
                    
                        Leczenie ortoreksji
                        Leczenie anoreksji
                    

                
                
                    Częste uzależnienia u kobiet
                    
                        Uzależnienie od zakupów
                        
                        Uzależnienie od pracy
                        Uzależnienie od seksu
                        Uzależnienie od leków

How to hide all items except the active branch on click - menu dropdown

1 Answers