content-rich button collapsed into icon and show nav tab content

Question

I'm trying to achieve this "effect" or whatever its called. Where I have a content-rich vertically aligned buttons (with an icon, header text, and normal text).

Then when a button gets pressed, A new set of vertically aligned buttons (with an icon and normal text) appeared as new options.

Then when a "sub-button" gets pressed, A content area appears.

I tried "vertically aligned tabs with bootstrap 4" but I'm stuck with:

showing ONLY the main buttons with full content
showing ONLY the icon for the main button (where the rest of the button content gets hidden after the click) +and+ the sub-buttons
return to normal, where only the main buttons appear with full content

as the picture below

I'm using: Bootstrap 4 + I know a little of JS

Please help me with this, or guide me to where I could get an answer for it. Thanks

~ update: here is a link for a very basic "vertical navs pills" I'm working on https://codepen.io/bixet/pen/yxGrLO


  
    
      Main
Home
      Main
Profile
      Main
Messages
      Main
Settings
    
  
  
    
      

        

          
    
      SubHome
      SubProfile
    
  


    
      1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.

      2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.      

    
  

        

      

      

        

          
    
      SubHome
      SubProfile
    
  


    
      1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.

      2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.      

    
  

        

      

      3) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.

      4) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at ex viverra, maximus ante nec, porta turpis. Fusce eu velit nec sem blandit aliquet. Curabitur vitae ultrices leo. Fusce risus mauris, iaculis vitae viverra in, lacinia quis lacus.

user_8172857 · Answer

i have the following solution that uses pure CSS and some Javascript code : (See this fiddle) for a good preview

let menuItems =document.querySelectorAll(".y-menu-item");
menuItems.forEach((item)=>{
    item.addEventListener("click", function(event){
        document.querySelectorAll(".y-texts-wrapper,.y-menu-sublevel-1").forEach((txtw)=>{
            txtw.style.display='none';
        });
        
        item.children[2].style.display='block'
        
    })
})

/********************** */

let subMenuItems=document.querySelectorAll('.y-menu-item-sublevel-1');


subMenuItems.forEach((subItem)=>{
    subItem.addEventListener("click",function(){
      
        document.querySelectorAll(".y-sub-l1-ht,.y-content").forEach((ht)=>{
            ht.style.display='none';
        });
        subItem.children[2].style.display='block'
     
    });
})

body{
    height: 100vh;
    width: 100vw;
    margin: 0;
    font-family: Montserrat,sans-serif;
    color:#333;
}
p{
    font-size: 10pt;
}
.y-menu{
    padding: 20px;
    height: 80%;
    display: flex;
    flex-direction: column;
    
    justify-content: space-between;
    align-items: flex-start;
   
}

.y-menu-item{
    display: flex;
    flex-direction:row;
    align-items: center;
    padding: 20px;
    margin: 5px 0;
    border-radius:5px;
    /* background: #eee; */
    cursor: pointer;

}



.y-icon{
    width: 70px;
    height: 70px;
    border-radius: 15px;
    background: #4E0BEF;
}

.y-s-icon{
    width: 40px;
    height: 40px;
    border-radius: 5px;

}
.y-texts-wrapper{
    margin-left: 20px;
    /* display: none; */
}

.y-normaltxt{
    width: 200px;

}
.y-menu-sublevel-1{
    display: none;
    position: absolute;
    margin-left: 84px;
    margin-top: 47px;
}

.y-menu-item-sublevel-1{
    display: flex;
    flex-direction:row;
    align-items: center;
    margin:0 0 10px 10px ;
}

@keyframes anim1{
    0% {width: 0;height: 0;opacity: 0;}
    50% {width: 250px;height: 250px;opacity: .5;}
    100% {width: 500px;height: 500px;opacity: 1;}
    
}

.y-content{
    width: 500px;
    height: 500px;
    top:20px;
    left:180px;
    padding:20px;
    color: #fff;
    background: #4E0BEF;
    position: fixed;
    display:none;
    text-align: center;
    animation: anim1 .1s ;
}




    
    
    
    Menu
    
    


    
        
            
            
                Some head text
                Lorem ipsum dolor sit amet consectetur adipisicing elit
                
            
            
                
                    
                    Some head text 1
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed mollitia et labore sunt distinctio laboriosam numquam laborum doloribus ex animi at amet maiores, quaerat temporibus, exercitationem minima repellat quos eligendi!
                    
                 
                
                    
                    Some head text 1
                    The main content

                   
                
                    
                    Some head text 1
                    The main content

                                    
                
            
            
        
        
            
            
                Some head text
                Lorem ipsum dolor sit amet consectetur adipisicing elit
                
            
            
                
                    
                    Some head text 1
                    The main content
                 
                
                    
                    Some head text 1
                    The main content
                   
                
                    
                    Some head text 1
                    The main content
                                    
            
            
            
        
        
            
            
                Some head text
                Lorem ipsum dolor sit amet consectetur adipisicing elit
                
            
            
                
                    
                    Some head text 1
                    The main content
                 
                
                    
                    Some head text 1
                    The main content
                   
                
                    
                    Some head text 1
                    The main content
                                    
                
            
        
        
            
            
                Some head text
                Lorem ipsum dolor sit amet consectetur adipisicing elit
                
            
            
                
                    
                    Some head text 1
                    The main content
                 
                
                    
                    Some head text 1
                    The main content
                   
                
                    
                    Some head text 1
                    The main content

content-rich button collapsed into icon and show nav tab content

1 Answers