function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AmulAmul 

Tab Pannel active Inactive how?

<aura:application >
    <ltng:require styles="/resource/SLDS100/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <ltng:require styles="/resource/SLDS100/assets/styles/salesforce-lightning-design-system-scoped.css" />
    <ltng:require styles="/resource/SLDS100/assets/styles/salesforce-lightning-design-system.css" />
    <ltng:require scripts="/resource/jquery214"  afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    
    <div class="slds-tabs--scoped">
  <ul class="slds-tabs--scoped__nav" role="tablist">
    <li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="ALL Accounts" role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" id="tab-scoped-1__item" onclick="selectTab(this);">All Accounts</a></li>
    <li class="slds-tabs--scoped__item slds-text-heading--label" title="ALL Contacts"
      role="presentation"><a class="slds-tabs--scoped__link" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2" id="tab-scoped-2__item" onclick="{!c.selectTab}" data="{tab-scoped-3__item}">All Contacts</a></li>
    <li class="slds-tabs--scoped__item slds-text-heading--label" title="Item Three"
      role="presentation"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-3" id="tab-scoped-3__item" onclick="{!c.selectTab}" data="{tab-scoped-3__item}">Item Three</a></li>
  </ul>
        <div id="tab-scoped-1" class="slds-tabs--scoped__content slds-show" role="tabpanel" aria-labelledby="tab-scoped-1__item">
            ALL CONTACTS<c:ContactList />
        </div>
        <div id="tab-scoped-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-2__item">
            ALL ACCOUNTS<c:AccountsList />
        </div>
        <div id="tab-scoped-3" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-3__item">
            Item Three Content
        </div>
    </div>
</aura:application>

what i have to write for enabling Tab ? Please share javascript if possible.
Best Answer chosen by Amul
Balasubramaniam 07Balasubramaniam 07

Hi Amul,

Please install this package from github or create just TAB,TABS component from the below URL.

TABS : https://github.com/ForceDotComLabs/sldsx/blob/master/metadata/aura/tabs/tabs.cmp 

TAB:   https://github.com/ForceDotComLabs/sldsx/tree/master/metadata/aura/tab

USAGE: https://github.com/ForceDotComLabs/sldsx/blob/master/metadata/aura/tabsDoc/tabsDoc.cmp

Thanks,
Bala

All Answers

Balasubramaniam 07Balasubramaniam 07

Hi Amul,

Please install this package from github or create just TAB,TABS component from the below URL.

TABS : https://github.com/ForceDotComLabs/sldsx/blob/master/metadata/aura/tabs/tabs.cmp 

TAB:   https://github.com/ForceDotComLabs/sldsx/tree/master/metadata/aura/tab

USAGE: https://github.com/ForceDotComLabs/sldsx/blob/master/metadata/aura/tabsDoc/tabsDoc.cmp

Thanks,
Bala

This was selected as the best answer
AmulAmul
thanks got it

Final Code
Component 
<aura:application >
    <ltng:require styles="/resource/SLDS202/assets/styles/salesforce-lightning-design-system.min.css" />
    <ltng:require scripts="/resource/jquery214"></ltng:require>
    
   <div class="slds-tabs--scoped">
  <ul class="slds-tabs--scoped__nav" role="tablist">
    <li class="slds-tabs--scoped__item slds-text-heading--label slds-active" title="ACCOUNTS" 
	role="presentation">
        <a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" 
	aria-controls="tab-scoped-1" id="tab-scoped-1__item" onclick="{!c.selectTab}">
         ACCOUNTS</a></li>
    <li class="slds-tabs--scoped__item slds-text-heading--label" title="CONTACTS" role="presentation">
     <a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" 
        aria-controls="tab-scoped-2" id="tab-scoped-2__item" onclick="{!c.selectTab}">
         CONTACTS</a></li>
    <li class="slds-tabs--scoped__item slds-text-heading--label" title="ITEM THREE"  role="presentation">
        <a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" 
           aria-controls="tab-scoped-3" id="tab-scoped-3__item" onclick="{!c.selectTab}">
            ITEM THREE</a></li>
  </ul>
  <div id="tab-scoped-1" class="slds-tabs--scoped__content slds-show" role="tabpanel" aria-labelledby="tab-scoped-1__item"><c:AccountsList /></div>
  <div id="tab-scoped-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-2__item"><c:ContactList /></div>
  <div id="tab-scoped-3" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="tab-scoped-3__item">Item Three Content</div>
</div>
</aura:application>

Controller.js
  
({
     selectTab: function(component, event, helper) {
         var tabindex = event.target.getAttribute("tabindex");
         tabindex = parseInt(tabindex);
         var obj=event.target;
         alert(tabindex);
         alert(obj.id);
         $("div").removeAttr('class');
         $("li").removeAttr('class')
         if(obj.id=='tab-scoped-1__item'){
             $(obj).attr("tabindex", 0);
             $(obj).parent("li").attr('class','slds-tabs--scoped__item slds-text-heading--label slds-active');
             //for div class
             $("#tab-scoped-1").attr('class', 'slds-tabs--scoped__content slds-show');
             $("#tab-scoped-2").attr('class', 'slds-tabs--scoped__content slds-hide');
             $("#tab-scoped-3").attr('class', 'slds-tabs--scoped__content slds-hide');
         }
         if(obj.id=='tab-scoped-2__item'){
             $(obj).attr("tabindex", 0);
             $(obj).attr("tabindex", 0);
             $(obj).parent("li").attr('class','slds-tabs--scoped__item slds-text-heading--label slds-active');
             //for div class
             $("#tab-scoped-1").attr('class', 'slds-tabs--scoped__content slds-hide');
             $("#tab-scoped-2").attr('class', 'slds-tabs--scoped__content slds-show');
             $("#tab-scoped-3").attr('class', 'slds-tabs--scoped__content slds-hide');
         }
         if(obj.id=='tab-scoped-3__item'){
             $(obj).attr("tabindex", 0);
             $(obj).attr("tabindex", 0);
             $(obj).parent("li").attr('class','slds-tabs--scoped__item slds-text-heading--label slds-active');
             //for div class
             $("#tab-scoped-1").attr('class', 'slds-tabs--scoped__content slds-hide');
             $("#tab-scoped-2").attr('class', 'slds-tabs--scoped__content slds-hide');
             $("#tab-scoped-3").attr('class', 'slds-tabs--scoped__content slds-show');
         }
   
    }
})