Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign in to follow this  

    CSS Tabs [Mobile+Keyboard Accessible]

       (0 reviews)

    These CSS radio-button tabs will turn into an accordion at lower screen widths. They are accessible to screen readers and keyboard users as well via the tab key (tab onto and off of the active tab), and arrow keys to switch between tabs.

     

    DoHTML friendly, multiple instances can be used on the same page. No javascript used. Follow the comments in the CSS to change styles. Codepen is here.


    Actual Template Responsive

    Tabset1 - Tab 1 header

    Tabset1 - Tab 1 paragraph

    Tabset1 - Tab 2 header

    Tabset1 - Tab 2 paragraph

    Tabset1 - Tab 3 header

    Tabset1 - Tab 3 paragraph

    Vertical - Tab 1 header

    Vertical - Tab 1 paragraph

    Vertical Tab 2 header

    Vertical Tab 2 paragraph

    Vertical Tab 3 header

    Vertical Tab 3 paragraph

    Template code

    <style>
    /* This wraps around the tabs, keeping them all in one area */
    .tab-container {
      display: flex;
      flex-wrap: wrap;
      width: 50%;
      margin: 10px auto;
      padding: 5px;
      border: 2px solid #252D34;
    }
    
    /* Hide the checkbox, do not use display:none as it prevents keyboard users navigating through the tabs */
    .tab-container input[type="radio"] {
      width: 0;
      height: 0;
      margin: 0;
      opacity: 0;
      padding: 0;
      border: none;
      -moz-appearance: none;
      -webkit-appearance: none;
    }
    
    /* The label of the input, this is what you see and click on instead of an ugly radio button */
    .tab-container label {
      order: 1;
      cursor:pointer;
      border-bottom: 2px solid #fff;
      color: #fff;
      padding: 5px 15px;
    }
    
    /* The label "tab" when clicked */
    .tab-container input[type="radio"]:checked + label {
      border-bottom: 2px solid #374c5d;
      color: #374c5d;
      cursor: default;
    }
    /* How the label appears to keyboard users when it is focused on  */
    .tab-container input[type="radio"]:focus + label {
      outline: 2px solid blue;
    }
    
    /* Panel styles */
    .tab-container .panel {
      order: 99;
      flex-grow: 1;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0;
      visibility: hidden;
    }
    
    /* Show panel when corresponding label is clicked
    * This is where your tab panel styles like height, padding, backgrounds and fonts go */
    .tab-container input[type="radio"]:checked + label + .panel {
      padding: 10px;
      position:relative;
      z-index: 1;
      opacity: 1;
      visibility: visible;
      transition: opacity ease-out 0.2s 0.1s;
      border: 2px solid red;
      height: 150px;
      overflow: auto;
    }
    
    /* Tabs to accordion at lower screen widths and on mobile. Inherits all the above tab styles from above */
    @media (max-width: 1000px) {
      /* Makes the tabs full width on smaller screens */
      .tab-container {
        width: 100%;
      }
      /* Reorders the tabs so that panels appear under their specific tab, like an accordion */
      .tab-container .panel,
      .tab-container label {
        order: initial;
      }
      /* Sets the label of the tab to full width of the container */
      .tab-container label {
        width: 100%;
        margin-right: 0;
        margin-top: 0.2rem;
      }
    /* Unsets the height of the visible panel so that you don't need to scroll through individual panels as well as the actual page */
      .tab-container input[type="radio"]:checked + label + .panel {
        height: unset;
      }
    }
      
    /* Vertical ID tabs will be vertical instead */
    #vertical.tab-container {flex-direction: column; height: 375px;}
    #vertical.tab-container label {width: 15%;}
    #vertical.tab-container input[type="radio"]:checked + label + .panel {width: 85%; height:100%; top: 0; overflow: auto;}
    @media (max-width: 1000px) {
      #vertical.tab-container {width: 100%; height: unset; flex-direction: row;}
      #vertical.tab-container label {width: 100%;flex-basis: 100%;}
      #vertical.tab-container input[type="radio"]:checked + label + .panel {width: 100%;}
    }
    </style>
    <div class="tab-container">
      
      <input name="tabset1" type="radio" id="tabset1-1" checked="checked" />
      <label for="tabset1-1">Tabset1 - Tab 1 Label</label>
      <div class="panel">
        <h1>Tabset1 - Tab 1 header</h1>
        <p>Tabset1 - Tab 1 paragraph</p>
      </div>
    
      <input name="tabset1" type="radio" id="tabset1-2" />
      <label for="tabset1-2">Tabset1 - Tab 2 Label</label>
      <div class="panel">
        <h1>Tabset1 - Tab 2 header</h1>
        <p>Tabset1 - Tab 2 paragraph</p>
      </div>
    
      <input name="tabset1" type="radio" id="tabset1-3" />
      <label for="tabset1-3">Tabset1 - Tab 3 Label</label>
      <div class="panel">
        <h1>Tabset1 - Tab 3 header</h1>
        <p>Tabset1 - Tab 3 paragraph</p>
      </div>
      
    </div>
    
    <div id="vertical" class="tab-container">
      
      <input name="vertical" type="radio" id="vertical-1" checked="checked" />
      <label for="vertical-1">Vertical 1 Label</label>
      <div class="panel">
        <h1>Vertical - Tab 1 header</h1>
        <p>Vertical - Tab 1 paragraph</p>
      </div>
    
      <input name="vertical" type="radio" id="vertical-2" />
      <label for="vertical-2">Vertical 2 Label</label>
      <div class="panel">
        <h1>Vertical Tab 2 header</h1>
        <p>Vertical Tab 2 paragraph</p>
      </div>
    
      <input name="vertical" type="radio" id="vertical-3" />
      <label for="vertical-3">Vertical 3 Label</label>
      <div class="panel">
        <h1>Vertical Tab 3 header</h1>
        <p>Vertical Tab 3 paragraph</p>
      </div>
      
    </div>
    Sign in to follow this  


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest



×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.