When switching from accordion (for mobile) to tab (for desktop), the tab pane shows incorrect name even though content is correct

Question

So, I'm trying to create a nav system, for mobile it should be present in an accordion-like manner and for desktop I want it to be in tabs. I have created it but there's this problem with it:

Suppose on my desktop, "Link #2" tab is opened when I switch to mobile version the same tab is opened in accordion BUT if I open some other tab in accordion say "Link #3" and then if I switch to desktop version, the desktop tab shows the content of "Link #3" but under "Link #2" pane.

And, if I hide all the three tabs in accordion (i.e. no content is visible only the headers ("Link#1" etc.) are visible) and then switch to desktop, no content is shown.

I searched but didn't find anything where someone tried to combine accordion and tabs.

I have just started learning Bootstrap and JavaScript so I apologise if I'm making some noob mistake. Please guide me towards the solution!

.container .nav-tabs {
   display: none;
}

/* MEDIA QUERY */
@media screen and (min-width: 600px) {
   .container .nav-tabs {
      display: flex;
   }
   .accordion-item h2 {
      display: none;
   }
   .container .accordion-item {
      border: none;
   }
}



  
    
    
    Bootstrap demo

    
    

    
  
  
    
      
        
          Link #1
        
        
          Link #2
        
        
          Link #3
        
      

      
        
          
            
          
          
            content 1
          
        
        
          
            
          
          
            content 2
          
        
        
          
            
          
          
            content 3

Md. Rakibul Islam · Accepted Answer

I solved the first part of your problem. Now you will not see different content when switching from mobile to desktop. For this I had to add 3 additional classes (nl-1, nl-2, nl-3):


    Link #1

On accordion button click, I triggered the corresponding nav-link click to show the correct content.

But I couldn't figure out a solution for the 2nd issue you are having.

.container .nav-tabs {
  display: none;
}

/* MEDIA QUERY */
@media screen and (min-width: 600px) {
  .container .nav-tabs {
      display: flex;
  }
  .accordion-item h2{
      display: none;
  }
  .container .accordion-item {
      border: none;
  }
}

When switching from accordion (for mobile) to tab (for desktop), the tab pane shows incorrect name even though content is correct

Answers (1)

Related Questions