Is it possible to have tabs without javascript

Question

I\'m trying to have a box with tabs, and have found many tutorials on how it\'s done with javascript to switch between the tabs. Is there anyway to have tabs without javascr

Answer 1

This method is slightly different from the :target method, using overflow and named anchors instead. The benefit is that your CSS doesn't need to know anything about dynamic content. Generated markup only needs to match

Tab A in the navigation with

inside the tab itself (at the end, preferably)

.ContentArea{ 
  width: 50vw;
  height: 50vh;
  position: absolute;
  z-index: 1;
  top: 25vh;
  left: 25vw;
  overflow: hidden;
 }
.tab{
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  z-index: 2;
}
.clearance{
  
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

  

    A | 
    B | 
    C | 
    D | 
    E
    F
  
  
 
    
    

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

      

        
      
    
    

    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 

      

        
      
    


    

    cccccccccccccccccccccccccccccc 

    cccccccccccccccccccccccccccccc 

    cccccccccccccccccccccccccccccc 

    cccccccccccccccccccccccccccccc 

      

        
      
    


    

    ffffdffffdffffdffffdffffdffffdffffdffffdffffdffffd 

    ffffdffffdffffdffffdffffdffffdffffdffffdffffdffffd 

    ffffdffffdffffdffffdffffdffffdffffdffffdffffdffffd 

    ffffdffffdffffdffffdffffdffffdffffdffffdffffdffffd 

      

        
      
    


    

    eeeeeeeeeeeeeeeeeeeeeeeeeeeeee 

    eeeeeeeeeeeeeeeeeeeeeeeeeeeeee 

    eeeeeeeeeeeeeeeeeeeeeeeeeeeeee 

    eeeeeeeeeeeeeeeeeeeeeeeeeeeeee 

      

        
      
    


    

    ffffffffffffffffffffffffffffff 

    ffffffffffffffffffffffffffffff 

    ffffffffffffffffffffffffffffff 

    ffffffffffffffffffffffffffffff 


      

        
      
    

  

This is nice, for one, because it only uses three simple CSS selectors and they are ALL classes. No strict requirements that come with IDs

The basic idea is you create a viewport with known dimensions, positioned either relatively or absolutely, somewhere on the page. This will be the display area for your tabs. Now you clip overflow to hide all but the first tab, rather than display: none

This faces a few challenges, so you may notice the "clearance" div at the end of each tab actually holds the named anchor. This div helps ensure that content is pushed around properly and not partly scrolled into view. Occasionally needs small tweaks, always very simple based on your design needs.

If you like, the nav links can be embedded in radio buttons to detect "checked" status. I've also done it where the nav is simply repeated in each tab with the active class varied. While redundant, it presents an interest navigation which can be dynamic per-tile, giving a 2D space. Fun to play with, but usually I just opt for toggling a class in the nav with jQuery.toggle()