How to prevent bootstrap from collapsing all the submenus when clicking on only one submenu?

Question

I am new to HTML CSS and trying to make a vertical navigation bar. My requirement is to provide sub-sub menus to sub menus in that vertical navigation bar. I did some googling and found a code and did some modificaiton to it to align it with my needs. Here is the code:

#main-menu {
    background-color: #2E3039;
}

.list-group-item {
    background-color: #2E3039;
    border: none;
}

a.list-group-item {
    color: rgb(22, 21, 21);
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: #43D5B1;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    color: #FFF;
    background-color: #43D5B1;
    border: none;
}

.list-group-item:first-child,
.list-group-item:last-child {
    border-radius: 0;
}

.list-group-level1 .list-group-item {
    padding-left:30px;
}

.list-group-level2 .list-group-item {
    padding-left:60px;
}



  
    Title
    
    
    

    
    
    
  
  
    
      
          
              
              
                  Item 1 
                  
                      Sub Item 1
                      Sub Item 2
                      Sub Item 3 
                      
                          Sub Sub Item 1
                          Sub Sub Item 2
                          Sub Sub Item 3
                      
                  
                  Item 2
                  Item 3
                  Item 4
                  Item 5

Now I wanted to add sub sub menus to other sub menus too... so I did some modification to my html file:



  
    Title
    
    
    

    
    
    
  
  
    
      
          
              
              
                  Item 1 
                  
                    Sub Item 1 
                    
                        Sub Sub Item 1
                        Sub Sub Item 2
                        Sub Sub Item 3
                    
                      
                      Sub Item 2 
                      
                          Sub Sub Item 1
                          Sub Sub Item 2
                          Sub Sub Item 3
                      
                      Sub Item 3 
                      
                          Sub Sub Item 1
                          Sub Sub Item 2
                          Sub Sub Item 3
                      
                  
                  Item 2
                  Item 3
                  Item 4
                  Item 5

But here, when I am trying to collapse sub Item 1, sub item 2 and sub item 3 are also getting collapsed.

So kindly help me with the code modification so that when I collapse sub Item 1, without collapsing other sub items. Thank you.

user_14194793 · Answer

Inside your HTML for each of the sub-sub-menus, simply add a number to each sub-sub-menu id (e.g. sub-sub-menu#) to specify which submenu is being activated. Right now your code is telling each of the submenus to activate all at the same time because they are called the same id.



  
    Title
    
    
    

    
    
    
    
    
    
  
  
    
      
          
              
              
                  Item 1 
                  
                    Sub Item 1 
                    
                        
                            
                                Sub Sub Item 1
                            
                            
                        
                        
                            
                                Sub Sub Item 2
                            
                            
                        
                        
                            
                                Sub Sub Item 3
                            
                            
                        
                    
                      
                      Sub Item 2 
                      
                          Sub Sub Item 1
                          Sub Sub Item 2
                          Sub Sub Item 3
                      
                      Sub Item 3 
                      
                          Sub Sub Item 1
                          Sub Sub Item 2
                          Sub Sub Item 3
                      
                  
                  Item 2
                  Item 3
                  Item 4
                  Item 5

How to prevent bootstrap from collapsing all the submenus when clicking on only one submenu?

1 Answers