HTML CSS Tab Controls - Multiple tab controls on the same page

Question

I grabbed a simple tab control from the css tricks site and its working great for me, except when I have two tab controls on the same page, clicking the bottom control simply changes the tab page of the top control.

The CSS Tricks page with the original code is here

Changing the name= attribute for the second group doesn't fix it.

Renaming the id's of each tab in the second group also doesn't fit it.

Is there a way to have two independently operating tabs on the same page ?

FWIW the HTML and CSS are fairly simple:

        .tabs {
          position: relative;   
          min-height: 100px;    
          clear: both;
          margin: 25px 0;
        }
        .tabs .tab {
          float: left;
        }
        .tabs .tab label {
          background: #eee; 
          padding: 5px 15px 5px 15px; 
          border: 1px solid #ccc; 
          position: relative;
          left: 1px; 
          cursor: pointer;
        }
        .tabs .tab [type=radio] {
          display: none;   
        }
        .tabs .content {
          position: absolute;
          top: 18px;
          left: 0;
          background: white;
          right: 0;
          bottom: 0;
          padding: 20px;
          border: 1px solid #ccc; 
          overflow:auto;
        }
        .tabs [type=radio]:checked ~ label {
          background: white;
          border-bottom: 1px solid white;
          z-index: 2;
        }
        .tabs [type=radio]:checked ~ label ~ .content {
          z-index: 1;
        }

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               stuff1
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               stuff2
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               stuff3
           </div> 
       </div>
        
    </div>

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               stuff4
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               stuff5
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               stuff6
           </div> 
       </div>
        
    </div>

Toby · Accepted Answer · 2016-07-22 17:28:57Z

The part to change is the label and the id:

<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>

I've edited your snippet.

        .tabs {
          position: relative;   
          min-height: 100px;    
          clear: both;
          margin: 25px 0;
        }
        .tabs .tab {
          float: left;
        }
        .tabs .tab label {
          background: #eee; 
          padding: 5px 15px 5px 15px; 
          border: 1px solid #ccc; 
          position: relative;
          left: 1px; 
          cursor: pointer;
        }
        .tabs .tab [type=radio] {
          display: none;   
        }
        .tabs .content {
          position: absolute;
          top: 18px;
          left: 0;
          background: white;
          right: 0;
          bottom: 0;
          padding: 20px;
          border: 1px solid #ccc; 
          overflow:auto;
        }
        .tabs [type=radio]:checked ~ label {
          background: white;
          border-bottom: 1px solid white;
          z-index: 2;
        }
        .tabs [type=radio]:checked ~ label ~ .content {
          z-index: 1;
        }

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               stuff1
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               stuff2
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               stuff3
           </div> 
       </div>
        
    </div>

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-4" name="tab-group-1" checked>
           <label for="tab-4">Tab One</label>
           
           <div class="content">
               stuff4
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-5" name="tab-group-1">
           <label for="tab-5">Tab Two</label>
           
           <div class="content">
               stuff5
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-6" name="tab-group-1">
           <label for="tab-6">Tab Three</label>
         
           <div class="content">
               stuff6
           </div> 
       </div>
        
    </div>

Marked as answer, and ego deflated because I didn't spot that myself !! thanks again

Collectives™ on Stack Overflow

HTML CSS Tab Controls - Multiple tab controls on the same page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related