jQuery Tab Navigation

app.js

jQuery(document).ready(function(){        
    tabTrigger = jQuery('.tab-trigger');
    tabContent = jQuery('.tab-content');
    
    tabTrigger.on('click', function(){
        tabTrigger.removeClass('open');
        jQuery(this).addClass('open');
        
        var thisRel = jQuery(this).attr('rel');
 		
        tabContent.removeClass('open');
        jQuery('#'+thisRel).addClass('open');
    });
});

/* if you need and "close all tabs" then use this JS: */

jQuery(document).ready(function(){
    tabTrigger = jQuery('.tab-trigger');
    tabContent = jQuery('.tab-content');
    
    tabTrigger.on('click', function(){
        var thisRel = jQuery(this).attr('rel');
        if(jQuery(this).hasClass('open')){
            tabTrigger.removeClass('open');
            tabContent.removeClass('open');
            jQuery('#start').addClass('open');
        }else{
            tabTrigger.removeClass('open');
            jQuery(this).addClass('open');

            tabContent.removeClass('open');
            jQuery('#'+thisRel).addClass('open');
        }
    });
});

index.html

<div class="tabs-triggers">
    <div class="tab-trigger open" rel="tab1">Tab Title 1</div>
    <div class="tab-trigger" rel="tab2">Tab Title 2</div>
    <div class="tab-trigger" rel="tab3">Tab Title 3</div>
    <div class="tab-trigger" rel="tab4">Tab Title 4</div>
</div>

<div class="tab-contents">
    <div id="tab1" class="tab-content open">
        Lorem 1
    </div> 
    <div id="tab2" class="tab-content">
        Lorem 2
    </div>
    <div id="tab3" class="tab-content">
        Lorem 3
    </div>
    <div id="tab4" class="tab-content">
        Lorem 4
    </div>
</div>

style.css

.tabs-triggers {
    display: block;
}

.tabs-triggers::after {
    content: "";
    display: block;
    clear: both;
}

.tab-trigger {
    float: left;
    padding: 10px;
    cursor: pointer;
}
.tab-trigger:hover {
    background: #eee;
}

.tab-trigger.open {
    background: #ddd;
}

.tabs-contents {
    width: 100%;
    clear: both;
}

.tabs-contents::after {
    content: "";
    display: block;
    clear: both;
}

.tab-content {
    width: 100%;
    clear: both;
    display: none;
    padding: 10px;
    background: #ddd;
}

.tab-content.open {
    display: block;
}