Semantic HTML Tabbed Content #pen https://codepen.io/amcgregor/pen/ZNeajJ

00-intro.md

WebCore UI Tabbed Content

With simple markup (see the markup file for an example) you can turn any definition list into a tabbed content area. Combined with the rest of the base WebCore UI styles, the sample looks like:

01-markup.html

<dl class="tabbed">
    <dt class="active">Tab Label</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </dd>
    
    <dt>Second Tab</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </dd>
    
    <dt class="disabled">Disabled Tab</dt>
    <dd>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </dd>
    
    <aside class="subtle">
        This is an &lt;aside class="subtle"&gt; element.
    </aside>
</dl>

02-styles.less

// Variables -- move these into a common file for global variables.

@base_size: 15px;
@base_line: 1.3;
@wcui_gutter_width: 15px;


// Mixins -- move these to a common file for global mixins.

.clearfix {
    *zoom: 1;
    &:before,
    &:after { display: table; content: ""; }
    &:after { clear: both; }
}

.border-radius(@radius)              { -webkit-border-radius: @radius;              -moz-border-radius: @radius;             border-radius: @radius; }
.border-radius-top(@radius)          { -webkit-border-top-left-radius: @radius;     -moz-border-radius-topleft: @radius;     border-top-left-radius: @radius;
                                       -webkit-border-top-right-radius: @radius;    -moz-border-radius-topright: @radius;    border-top-right-radius: @radius; }
.border-radius-bottom(@radius)       { -webkit-border-bottom-left-radius: @radius;  -moz-border-radius-bottomleft: @radius;  border-bottomleft-radius: @radius;
                                       -webkit-border-bottom-right-radius: @radius; -moz-border-radius-bottomright: @radius; border-bottom-right-radius: @radius; }
.border-radius-top-left(@radius)     { -webkit-border-top-left-radius: @radius;     -moz-border-radius-topleft: @radius;     border-top-left-radius: @radius; }
.border-radius-top-right(@radius)    { -webkit-border-top-right-radius: @radius;    -moz-border-radius-topright: @radius;    border-top-right-radius: @radius; }
.border-radius-bottom-left(@radius)  { -webkit-border-bottom-left-radius: @radius;  -moz-border-radius-bottomleft: @radius;  border-bottomleft-radius: @radius; }
.border-radius-bottom-right(@radius) { -webkit-border-bottom-right-radius: @radius; -moz-border-radius-bottomright: @radius; border-bottom-right-radius: @radius; }


// Tabbed Definition List

dl.tabbed {
    .clearfix;
    position: relative;
    
    dt, dd {
        background-color: white;
        border: 1px solid #ddd;
        padding: @wcui_gutter_width;
        position: relative;
    }
    
    dt {
        .border-radius-top(5px);
        
        background-color: white;
        border-color: transparent;
        border-bottom-width: 0;
        float: left;
        margin-right: 2px;
        padding-top: 5px;
        padding-bottom: 4px;
        
        &:hover {
            background-color: #eee;
            cursor: pointer;
        }
        
        &.active {
            border: 1px solid #ddd;
            border-bottom-color: white;
            background-color: white;
        }
        
        &.disabled {
            &:hover {
                background-color: white;
            }
        }
    }
    
    dd {
        .border-radius(5px);
        .border-radius-top-left(0);
        
        display: none;
        float: right;
        margin-left: -100%;
        margin-top: @base_size * @base_line + 10px;
        width: 100%;
        z-index: -1;
    }
    
    dt.active + dd {
        display: block;
    }
    
    > aside {
        padding-top: 6px;
        padding-right: 1px + @wcui_gutter_width;
        float: right;
        position: relative;
        z-index: -2;
    }
}

03-script.js

$(function(){
    // Prevent clicking on disabled things.
    $(document).on('click', '.disabled', false);
    
    // Handle tab switching.
    $(document).on('click', 'dl.tabbed dt:not(.disabled)', function(e){
        $(this).addClass('active').siblings().removeClass('active');
        return false;
    });
});

Compare vs:

• https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

• https://polaris.shopify.com/components/navigation/tabs#navigation