How to create overlay tabs in lightning using SLDS ?

Create a lightning record page and try assocating it to case object to see the functionality working.

Note : I handled each tab click in a separate javascript controller method, just for understanding purpose.

Drawbacks of Overlay item Tabs: Responsive is not possible with this SLDS overlay item tabs.

 

Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
 <aura:attribute name="record" type="Case"/>
  
 <div class="slds-tabs_default">
 
 <ul class="slds-tabs_default__nav" role="tablist">
 
 <li aura:id = "tab1" class="slds-tabs_default__item " title="Item One" role="presentation"><a class="slds-tabs_default__link" href="javascript:void(0);" onclick = "{!c.Tab1func}" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item " >Tab 1</a></li>
 
 <li aura:id = "tab2" class="slds-tabs_default__item" title="Item Two" role="presentation"><a class="slds-tabs_default__link" href="javascript:void(0);" onclick = "{!c.Tab2func}" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Tab 2</a></li>
 
 <li aura:id = "tab3" class="slds-tabs_default__item" title="Item Three" role="presentation"><a class="slds-tabs_default__link" href="javascript:void(0);" onclick = "{!c.Tab3func}" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-3" id="tab-default-3__item">Tab 3</a></li>
 
 <li aura:id = "tab4" class="slds-tabs_default__item" title="Item Four" role="presentation"><a class="slds-tabs_default__link" href="javascript:void(0);" onclick = "{!c.Tab4func}" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-4" id="tab-default-4__item">Tab 4</a></li>
 
 <li aura:id = "tab5" class="slds-dropdown-trigger slds-dropdown-trigger_click slds-tabs_default__item slds-tabs__item_overflow "
 onclick="{!c.oFlowTabberExpand}" title="More tabs" role="presentation">
 <a class="slds-button slds-tabs_default__link" href="javascript:void(0);" aria-haspopup="true">
 <span class="slds-truncate" title="More tabs">More
 <span class="slds-assistive-text">tabs</span>
 </span>
 
 </a>
 <div aura:id = "" class="slds-dropdown slds-dropdown_right">
 <ul class="slds-dropdown__list slds-dropdown_length-with-icon-10" role="menu">
 
 
 <li aura:id = "overflowtab1" class="slds-dropdown__item" role="presentation">
 <a href="javascript:void(0);" onclick = "{!c.oFlowTabber1}" role="menuitem" tabindex="-1">
 <span class="slds-truncate" title="" id = "tab-default-5__item">
 
 Tab 5</span>
 </a>
 </li>
 
 <li aura:id = "overflowtab2" class="slds-dropdown__item" role="presentation">
 <a href="javascript:void(0);" onclick = "{!c.oFlowTabber2}" role="menuitem" tabindex="-1">
 <span class="slds-truncate" title="" id = "tab-default-6__item">
 
 Tab 6 </span>
 </a>
 </li>

 </ul>
 </div>
 </li>
 </ul>
 <div aura:id="tab1content" id="tab-default-1" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-1__item">

<div class="slds-grid">
 <div class="slds-col" style="width:100%">
 Name : Dk
 </div>
 
 <div class="slds-col" style="width:100%">
 Email : din2262@gmail.com
 </div> 
 
 <div class="slds-col" style="width:100%">
 Gender : Male
 </div> 
 </div> 
 </div>
 
 <div aura:id="tab2content" id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
 
 <div class="slds-grid">
 <div class="slds-col" style="width:100%">
 Name : Dk
 </div>
 
 <div class="slds-col" style="width:100%">
 Email : din2262@gmail.com
 </div> 
 
 <div class="slds-col" style="width:100%">
 Gender : Male
 </div> 
 
 </div> 

</div>
 <div aura:id="tab3content" id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">
 
 <div class="slds-grid">
 <div class="slds-col" style="width:100%">
 Name : Dk
 </div>
 
 <div class="slds-col" style="width:100%">
 Email : din2262@gmail.com
 </div> 
 
 <div class="slds-col" style="width:100%">
 Gender : Male
 </div> 
 </div> 
</div>
 <div aura:id="tab4content" id="tab-default-4" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-4__item">
 <div class="slds-grid">
 <div class="slds-col" style="width:100%">
 Name : Dk
 </div>
 
 <div class="slds-col" style="width:100%">
 Email : din2262@gmail.com
 </div> 
 
 <div class="slds-col" style="width:100%">
 Gender : Male
 </div> 
 
 </div> 
 </div>
 
 
 <div aura:id="otab1content" id="tab-default-5" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-5__item">
 <div class="slds-grid">
 <div class="slds-col" style="width:100%">
 Name : Dk
 </div>
 
 <div class="slds-col" style="width:100%">
 Email : din2262@gmail.com
 </div> 
 
 <div class="slds-col" style="width:100%">
 Gender : Male
 </div> 
 
 </div> 
 
 </div>
 <div aura:id="otab2content" id="tab-default-6" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-6__item">
 
 
 <div class="slds-grid">
 <div class="slds-col" style="width:100%">
 Name : Dk
 </div>
 
 <div class="slds-col" style="width:100%">
 Email : din2262@gmail.com
 </div> 
 
 <div class="slds-col" style="width:100%">
 Gender : Male
 </div> 
 </div> 
 </div>
 </div> 

</aura:component>

Controller.js

({
 
 Tab1func: function(component, event, helper) {
 var tab1 = component.find('tab1');
 var TabOnedata = component.find('tab1content');
 
 var tab2 = component.find('tab2');
 var TabTwoData = component.find('tab2content');
 
 var tab3 = component.find('tab3');
 var TabThreeData = component.find('tab3content');
 
 var tab4 = component.find('tab4');
 var TabFourData = component.find('tab4content');
 
 
 $A.util.addClass(tab1, 'slds-active');
 $A.util.addClass(TabOnedata, 'slds-show');
 $A.util.removeClass(TabOnedata, 'slds-hide');
 
 $A.util.removeClass(tab2, 'slds-active');
 $A.util.removeClass(TabTwoData, 'slds-show');
 $A.util.addClass(TabTwoData, 'slds-hide');
 
 $A.util.removeClass(tab3, 'slds-active');
 $A.util.removeClass(TabThreeData, 'slds-show');
 $A.util.addClass(TabThreeData, 'slds-hide');
 
 
 var otab1 = component.find('overflowtab1');
 var otab1content = component.find('otab1content');
 
 var otab2 = component.find('overflowtab2');
 var otab2content = component.find('otab2content');
 
 var otab3 = component.find('overflowtab3');
 var otab3content = component.find('otab3content');
 
 var otab4 = component.find('overflowtab4');
 var otab4content = component.find('otab4content');
 
 var otab5 = component.find('overflowtab5');
 var otab5content = component.find('otab5content');
 
 $A.util.removeClass(otab1, 'slds-active');
 $A.util.removeClass(otab1content, 'slds-show'); 
 
 $A.util.removeClass(otab2, 'slds-active');
 $A.util.removeClass(otab2content, 'slds-show'); 
 
 $A.util.removeClass(otab3, 'slds-active');
 $A.util.removeClass(otab3content, 'slds-show'); 
 
 $A.util.removeClass(otab4, 'slds-active');
 $A.util.removeClass(otab4content, 'slds-show'); 
 
 $A.util.removeClass(otab5, 'slds-active');
 $A.util.removeClass(otab5content, 'slds-show'); 
 },
 Tab2func: function(component, event, helper) {
 
 var tab1 = component.find('tab1');
 var TabOnedata = component.find('tab1content');
 
 var tab2 = component.find('tab2');
 var TabTwoData = component.find('tab2content');
 
 var tab3 = component.find('tab3');
 var TabThreeData = component.find('tab3content');

var tab4 = component.find('tab4');
 var TabFourData = component.find('tab4content');


$A.util.addClass(tab2, 'slds-active');
 $A.util.removeClass(TabTwoData, 'slds-hide');
 $A.util.addClass(TabTwoData, 'slds-show');
 
 $A.util.removeClass(tab1, 'slds-active');
 $A.util.removeClass(TabOnedata, 'slds-show');
 $A.util.addClass(TabOnedata, 'slds-hide');
 
 $A.util.removeClass(tab3, 'slds-active');
 $A.util.removeClass(TabThreeData, 'slds-show');
 $A.util.addClass(TabThreeData, 'slds-hide');
 
 $A.util.removeClass(tab4, 'slds-active');
 $A.util.removeClass(TabFourData, 'slds-show');
 $A.util.addClass(TabFourData, 'slds-hide');
 
 var otab1 = component.find('overflowtab1');
 var otab1content = component.find('otab1content');
 
 var otab2 = component.find('overflowtab2');
 var otab2content = component.find('otab2content');
 
 var otab3 = component.find('overflowtab3');
 var otab3content = component.find('otab3content');
 
 var otab4 = component.find('overflowtab4');
 var otab4content = component.find('otab4content');
 
 var otab5 = component.find('overflowtab5');
 var otab5content = component.find('otab5content');
 
 $A.util.removeClass(otab1, 'slds-active');
 $A.util.removeClass(otab1content, 'slds-show'); 
 
 $A.util.removeClass(otab2, 'slds-active');
 $A.util.removeClass(otab2content, 'slds-show'); 
 
 $A.util.removeClass(otab3, 'slds-active');
 $A.util.removeClass(otab3content, 'slds-show'); 
 
 $A.util.removeClass(otab4, 'slds-active');
 $A.util.removeClass(otab4content, 'slds-show'); 
 
 $A.util.removeClass(otab5, 'slds-active');
 $A.util.removeClass(otab5content, 'slds-show'); 
 
 },
 Tab3func: function(component, event, helper) {
 var tab1 = component.find('tab1');
 var TabOnedata = component.find('tab1content');
 
 var tab2 = component.find('tab2');
 var TabTwoData = component.find('tab2content');
 
 var tab3 = component.find('tab3');
 var TabThreeData = component.find('tab3content');
 
 var tab4 = component.find('tab4');
 var TabFourData = component.find('tab4content');
 
 
 $A.util.addClass(tab3, 'slds-active');
 $A.util.addClass(TabThreeData, 'slds-show');
 
 $A.util.removeClass(tab1, 'slds-active');
 $A.util.removeClass(TabOnedata, 'slds-show');
 $A.util.addClass(TabOnedata, 'slds-hide');
 
 $A.util.removeClass(tab2, 'slds-active');
 $A.util.removeClass(TabTwoData, 'slds-show');
 $A.util.addClass(TabTwoData, 'slds-hide');
 
 $A.util.removeClass(tab4, 'slds-active');
 $A.util.removeClass(TabFourData, 'slds-show');
 $A.util.addClass(TabFourData, 'slds-hide');
 
 
 var otab1 = component.find('overflowtab1');
 var otab1content = component.find('otab1content');
 
 var otab2 = component.find('overflowtab2');
 var otab2content = component.find('otab2content');
 
 var otab3 = component.find('overflowtab3');
 var otab3content = component.find('otab3content');
 
 var otab4 = component.find('overflowtab4');
 var otab4content = component.find('otab4content');
 
 var otab5 = component.find('overflowtab5');
 var otab5content = component.find('otab5content');
 
 $A.util.removeClass(otab1, 'slds-active');
 $A.util.removeClass(otab1content, 'slds-show'); 
 
 $A.util.removeClass(otab2, 'slds-active');
 $A.util.removeClass(otab2content, 'slds-show'); 
 
 $A.util.removeClass(otab3, 'slds-active');
 $A.util.removeClass(otab3content, 'slds-show'); 
 
 $A.util.removeClass(otab4, 'slds-active');
 $A.util.removeClass(otab4content, 'slds-show'); 
 
 $A.util.removeClass(otab5, 'slds-active');
 $A.util.removeClass(otab5content, 'slds-show'); 
 },
 
 Tab4func: function(component, event, helper) {
 var tab1 = component.find('tab1');
 var TabOnedata = component.find('tab1content');
 
 var tab2 = component.find('tab2');
 var TabTwoData = component.find('tab2content');
 
 var tab3 = component.find('tab3');
 var TabThreeData = component.find('tab3content');
 
 var tab4 = component.find('tab4');
 var TabFourData = component.find('tab4content');
 
 
 $A.util.addClass(tab4, 'slds-active');
 $A.util.addClass(TabFourData, 'slds-show');
 
 $A.util.removeClass(tab1, 'slds-active');
 $A.util.removeClass(TabOnedata, 'slds-show');
 $A.util.addClass(TabOnedata, 'slds-hide');
 
 $A.util.removeClass(tab2, 'slds-active');
 $A.util.removeClass(TabTwoData, 'slds-show');
 $A.util.addClass(TabTwoData, 'slds-hide');
 
 $A.util.removeClass(tab3, 'slds-active');
 $A.util.removeClass(TabThreeData, 'slds-show');
 $A.util.addClass(TabThreeData, 'slds-hide');
 
 var otab1 = component.find('overflowtab1');
 var otab1content = component.find('otab1content');
 
 var otab2 = component.find('overflowtab2');
 var otab2content = component.find('otab2content');
 
 var otab3 = component.find('overflowtab3');
 var otab3content = component.find('otab3content');
 
 var otab4 = component.find('overflowtab4');
 var otab4content = component.find('otab4content');
 
 var otab5 = component.find('overflowtab5');
 var otab5content = component.find('otab5content');
 
 $A.util.removeClass(otab1, 'slds-active');
 $A.util.removeClass(otab1content, 'slds-show'); 
 
 $A.util.removeClass(otab2, 'slds-active');
 $A.util.removeClass(otab2content, 'slds-show'); 
 
 $A.util.removeClass(otab3, 'slds-active');
 $A.util.removeClass(otab3content, 'slds-show'); 
 
 $A.util.removeClass(otab4, 'slds-active');
 $A.util.removeClass(otab4content, 'slds-show'); 
 
 $A.util.removeClass(otab5, 'slds-active');
 $A.util.removeClass(otab5content, 'slds-show'); 
 
 },
 
 
 oFlowTabberExpand: function(component, event, helper) {
 
 var tab5 = component.find('tab5');
 $A.util.toggleClass(tab5,'slds-is-open');
 },
 oFlowTabber1: function(component, event, helper) {
 
 
 var tab1 = component.find('tab1');
 var TabOnedata = component.find('tab1content');
 
 var tab2 = component.find('tab2');
 var TabTwoData = component.find('tab2content');
 
 var tab3 = component.find('tab3');
 var TabThreeData = component.find('tab3content');
 
 var tab4 = component.find('tab4');
 var TabFourData = component.find('tab4content');
 
 
 
 var otab1 = component.find('overflowtab1');
 var otab1content = component.find('otab1content');
 
 var otab2 = component.find('overflowtab2');
 var otab2content = component.find('otab2content');
 
 var otab3 = component.find('overflowtab3');
 var otab3content = component.find('otab3content');
 
 var otab4 = component.find('overflowtab4');
 var otab4content = component.find('otab4content');
 
 var otab5 = component.find('overflowtab5');
 var otab5content = component.find('otab5content');
 
 
 $A.util.removeClass(tab1, 'slds-active');
 $A.util.removeClass(TabOnedata, 'slds-show');
 $A.util.addClass(TabOnedata, 'slds-hide');
 
 $A.util.removeClass(tab2, 'slds-active');
 $A.util.removeClass(TabTwoData, 'slds-show');
 $A.util.addClass(TabTwoData, 'slds-hide');
 
 $A.util.removeClass(tab3, 'slds-active');
 $A.util.removeClass(TabThreeData, 'slds-show');
 $A.util.addClass(TabThreeData, 'slds-hide');
 
 $A.util.removeClass(tab4, 'slds-active');
 $A.util.removeClass(TabFourData, 'slds-show');
 $A.util.addClass(TabFourData, 'slds-hide');
 
 
 
 $A.util.addClass(otab1, 'slds-active');
 $A.util.addClass(otab1content, 'slds-show'); 
 
 $A.util.removeClass(otab2, 'slds-active');
 $A.util.removeClass(otab2content, 'slds-show'); 
 
 $A.util.removeClass(otab3, 'slds-active');
 $A.util.removeClass(otab3content, 'slds-show'); 
 
 $A.util.removeClass(otab4, 'slds-active');
 $A.util.removeClass(otab4content, 'slds-show'); 
 
 $A.util.removeClass(otab5, 'slds-active');
 $A.util.removeClass(otab5content, 'slds-show'); 
 
 
 },
 
 oFlowTabber2: function(component, event, helper) {
 
 var tab1 = component.find('tab1');
 var TabOnedata = component.find('tab1content');
 
 var tab2 = component.find('tab2');
 var TabTwoData = component.find('tab2content');
 
 var tab3 = component.find('tab3');
 var TabThreeData = component.find('tab3content');
 
 var tab4 = component.find('tab4');
 var TabFourData = component.find('tab4content');
 
 
 
 var otab1 = component.find('overflowtab1');
 var otab1content = component.find('otab1content');
 
 var otab2 = component.find('overflowtab2');
 var otab2content = component.find('otab2content');
 
 var otab3 = component.find('overflowtab3');
 var otab3content = component.find('otab3content');
 
 var otab4 = component.find('overflowtab4');
 var otab4content = component.find('otab4content');
 
 var otab5 = component.find('overflowtab5');
 var otab5content = component.find('otab5content');
 
 
 $A.util.removeClass(tab1, 'slds-active');
 $A.util.removeClass(TabOnedata, 'slds-show');
 $A.util.addClass(TabOnedata, 'slds-hide');
 
 $A.util.removeClass(tab2, 'slds-active');
 $A.util.removeClass(TabTwoData, 'slds-show');
 $A.util.addClass(TabTwoData, 'slds-hide');
 
 $A.util.removeClass(tab3, 'slds-active');
 $A.util.removeClass(TabThreeData, 'slds-show');
 $A.util.addClass(TabThreeData, 'slds-hide');
 
 $A.util.removeClass(tab4, 'slds-active');
 $A.util.removeClass(TabFourData, 'slds-show');
 $A.util.addClass(TabFourData, 'slds-hide');
 
 
 
 
 $A.util.addClass(otab2, 'slds-active');
 $A.util.addClass(otab2content, 'slds-show'); 
 
 $A.util.removeClass(otab1, 'slds-active');
 $A.util.removeClass(otab1content, 'slds-show'); 
 
 $A.util.removeClass(otab3, 'slds-active');
 $A.util.removeClass(otab3content, 'slds-show'); 
 
 $A.util.removeClass(otab4, 'slds-active');
 $A.util.removeClass(otab4content, 'slds-show'); 
 
 $A.util.removeClass(otab5, 'slds-active');
 $A.util.removeClass(otab5content, 'slds-show'); 
 
 
 },
 
 
 
 oFlowTabber3: function(component, event, helper) {
 
 var tab1 = component.find('tab1');
 var TabOnedata = component.find('tab1content');
 
 var tab2 = component.find('tab2');
 var TabTwoData = component.find('tab2content');
 
 var tab3 = component.find('tab3');
 var TabThreeData = component.find('tab3content');
 
 var tab4 = component.find('tab4');
 var TabFourData = component.find('tab4content');
 
 
 var otab1 = component.find('overflowtab1');
 var otab1content = component.find('otab1content');
 
 var otab2 = component.find('overflowtab2');
 var otab2content = component.find('otab2content');
 
 var otab3 = component.find('overflowtab3');
 var otab3content = component.find('otab3content');
 
 var otab4 = component.find('overflowtab4');
 var otab4content = component.find('otab4content');
 
 var otab5 = component.find('overflowtab5');
 var otab5content = component.find('otab5content');
 
 $A.util.removeClass(tab1, 'slds-active');
 $A.util.removeClass(TabOnedata, 'slds-show');
 $A.util.addClass(TabOnedata, 'slds-hide');
 
 $A.util.removeClass(tab2, 'slds-active');
 $A.util.removeClass(TabTwoData, 'slds-show');
 $A.util.addClass(TabTwoData, 'slds-hide');
 
 $A.util.removeClass(tab3, 'slds-active');
 $A.util.removeClass(TabThreeData, 'slds-show');
 $A.util.addClass(TabThreeData, 'slds-hide');
 
 $A.util.removeClass(tab4, 'slds-active');
 $A.util.removeClass(TabFourData, 'slds-show');
 $A.util.addClass(TabFourData, 'slds-hide');
 
 
 $A.util.addClass(otab3, 'slds-active');
 $A.util.addClass(otab3content, 'slds-show'); 
 
 $A.util.removeClass(otab1, 'slds-active');
 $A.util.removeClass(otab1content, 'slds-show'); 
 
 $A.util.removeClass(otab2, 'slds-active');
 $A.util.removeClass(otab2content, 'slds-show'); 
 
 $A.util.removeClass(otab4, 'slds-active');
 $A.util.removeClass(otab4content, 'slds-show'); 
 
 $A.util.removeClass(otab5, 'slds-active');
 $A.util.removeClass(otab5content, 'slds-show'); 
 
 
 
 },
 
 
 
 oFlowTabber4: function(component, event, helper) {
 
 var tab1 = component.find('tab1');
 var TabOnedata = component.find('tab1content');
 
 var tab2 = component.find('tab2');
 var TabTwoData = component.find('tab2content');
 
 var tab3 = component.find('tab3');
 var TabThreeData = component.find('tab3content');
 
 var tab4 = component.find('tab4');
 var TabFourData = component.find('tab4content');
 
 
 var otab1 = component.find('overflowtab1');
 var otab1content = component.find('otab1content');
 
 var otab2 = component.find('overflowtab2');
 var otab2content = component.find('otab2content');
 
 var otab3 = component.find('overflowtab3');
 var otab3content = component.find('otab3content');
 
 var otab4 = component.find('overflowtab4');
 var otab4content = component.find('otab4content');
 
 var otab5 = component.find('overflowtab5');
 var otab5content = component.find('otab5content');
 
 
 $A.util.removeClass(tab1, 'slds-active');
 $A.util.removeClass(TabOnedata, 'slds-show');
 $A.util.addClass(TabOnedata, 'slds-hide');
 
 $A.util.removeClass(tab2, 'slds-active');
 $A.util.removeClass(TabTwoData, 'slds-show');
 $A.util.addClass(TabTwoData, 'slds-hide');
 
 $A.util.removeClass(tab3, 'slds-active');
 $A.util.removeClass(TabThreeData, 'slds-show');
 $A.util.addClass(TabThreeData, 'slds-hide');
 
 $A.util.removeClass(tab4, 'slds-active');
 $A.util.removeClass(TabFourData, 'slds-show');
 $A.util.addClass(TabFourData, 'slds-hide');
 
 
 
 $A.util.addClass(otab4, 'slds-active');
 $A.util.addClass(otab4content, 'slds-show'); 
 
 $A.util.removeClass(otab1, 'slds-active');
 $A.util.removeClass(otab1content, 'slds-show'); 
 
 $A.util.removeClass(otab2, 'slds-active');
 $A.util.removeClass(otab2content, 'slds-show'); 
 
 $A.util.removeClass(otab3, 'slds-active');
 $A.util.removeClass(otab3content, 'slds-show'); 
 
 $A.util.removeClass(otab5, 'slds-active');
 $A.util.removeClass(otab5content, 'slds-show'); 
 
 },
 
 oFlowTabber5: function(component, event, helper) {
 
 var tab1 = component.find('tab1');
 var TabOnedata = component.find('tab1content');
 
 var tab2 = component.find('tab2');
 var TabTwoData = component.find('tab2content');
 
 var tab3 = component.find('tab3');
 var TabThreeData = component.find('tab3content');
 
 var tab4 = component.find('tab4');
 var TabFourData = component.find('tab4content');
 
 
 var otab1 = component.find('overflowtab1');
 var otab1content = component.find('otab1content');
 
 var otab2 = component.find('overflowtab2');
 var otab2content = component.find('otab2content');
 
 var otab3 = component.find('overflowtab3');
 var otab3content = component.find('otab3content');
 
 var otab4 = component.find('overflowtab4');
 var otab4content = component.find('otab4content');
 
 var otab5 = component.find('overflowtab5');
 var otab5content = component.find('otab5content');
 
 $A.util.addClass(otab5, 'slds-active');
 $A.util.addClass(otab5content, 'slds-show'); 
 
 $A.util.removeClass(otab1, 'slds-active');
 $A.util.removeClass(otab1content, 'slds-show'); 
 
 $A.util.removeClass(otab2, 'slds-active');
 $A.util.removeClass(otab2content, 'slds-show'); 
 
 $A.util.removeClass(otab3, 'slds-active');
 $A.util.removeClass(otab3content, 'slds-show'); 
 
 $A.util.removeClass(otab4, 'slds-active');
 $A.util.removeClass(otab4content, 'slds-show'); 
 
 },
 
})

Style.css :

.THIS .slds-col {

padding-top: 24px;

padding-left: 32px;

}

Be the first to comment

Leave a Reply

Your email address will not be published.


*