+ Start a Discussion
DahveedDahveed 

Lightning design system tabs and javascript

I've been working with developing a stand-alone app in lightning. In trying to adhere to the look and feel I'm following the html layed out in https://www.lightningdesignsystem.com/components/tabs. Sorry if this is a newb question how do I manipulate the class of the <a> being clicked to .slds-active and it's corresponding <div> to .slds-show , and then remove any other existing <a> with the .slds-active and change the <div> to .sld.slds-hide?  I've seen something similiar with javascript on a visualforce page but I wanted to follow the component design structure. Surely someone has done this as it seems pretty standard navigation. Currently my component has

<div class="slds-tabs--default">
 <ul class="slds-tabs--default__nav" role="tablist">
   <li class="slds-tabs--default__item slds-text-heading--label slds-active" title="Item One" role="presentation">
   <a class="slds-tabs--default__link" href="#void" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" data-data="tab-default-1__item"  onclick="{!c.selectTab}" id="tab-default-1__item">New Checklists</a>
        </li>
  <li class="slds-tabs--default__item slds-text-heading--label" title="Item Two" role="presentation">
            <a class="slds-tabs--default__link" href="#void" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" data-data="tab-default-2__item" onclick="{!c.selectTab}" id="tab-default-2__item">Existing Checklist</a>
        </li>
      </ul>
      <div id="tab-default-1" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">
        <h2>Item One Content</h2>
      </div>
      <div id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">
        <h2>Item Two Content</h2>
      </div>

    </div>
I have the onClick="{!c.selectTab}" which goes to my js controller. Below
selectTab : function(component, event, helper){
    	var activeTab;
        activeTab = event.target.getAttribute("id");
        //var result = component.find("tab-default-1__item");
        //alert(result);
  
    },

I see the event.target.getAttribute gives me the value of the onclick id. I can get the value and can then tell which tab was clicked, but then how do I 

1. Change the class value of that Id?
2. Change the class value of other id's?

I've been trying to use various javascript  functions like find but nothing seems to be working. Can someone point me to which functions I should be using to find id(DOMS) on a component and which functions can be used to set vairous attributes?  I didn't find anything in the lightning dev guide but will keep looking. Any help is appreciated.
 

Rowan  ChristmasRowan Christmas
You may want to consider nested components. I've been working to make a feed of items, and in order to get each cell to respond to clicks as I would expect, I created a Lightning Cell component, which is wrapped in a <li> tag:
 
<div class="slds-feed">
    <ul class="slds-feed__list">
        <aura:iteration items="{!v.objects}" var="obj">

        <li class="slds-feed__item">
            <c:Cell object="{!obj}"/>
        </li>
    </aura:iteration>
</ul>

Then the cell can have an aura attribute of the SObject in question and do whatever you need to do that way. Not sure if that's exactly what you're going for... but it feels like Lightning wants you to be following a container approach for complex components like this.
James LoghryJames Loghry
For your bullet points, I would strongly recommend bringing jquery into the picture of your lightning component.  Add jquery as a static resource and then use the ltng:require tag to add the jquery script.  From there you can use jquery selectors like $("[id$=youridgoeshere]") and addClass and removeClass, etc to update the classes of your divs.

Here's a post from bob buzzard which demonstrates how to include jquery: http://bobbuzzard.blogspot.com/2015/06/lightning-components-and-unobtrusive.html
Jasveer SinghJasveer Singh
Include Jquery into lightning Component

Go to Setup select Critical Update

Deactivate:  Enable Lightning LockerService Security

and paste below code in developer console


1 Step: Insert into component

<ltng:require scripts="/resource/Jq"  afterScriptsLoaded="{!c.afterScriptsLoaded}" />
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 Step: Insert into Component

<button id="button1" onclick="{!c.dropdown}" class="slds-button slds-button--neutral">Show/Hide Columns
                <img src="/resource/dropdownIcon" style="height:20px; width:20px;"/></button>
<p id="dropdown1">hi</p>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Step 3: insert into Controller

({
    afterScriptsLoaded : function(component, event, helper) {
        
        },
    
    dropdown:function(component, event, helper)
    {
      //  console.log("1st time");
       //  $.noConflict();
        jQuery("#dropdown1").toggle();
//console.log("2nd time");
    }
    
})

 
AmulAmul
HI Dahveed,

did you get your question answered. I am not able to fix this tab active. could you please paste your code..which is working. I am looking for javascript code for enabling tabs.
DFW DudeDFW Dude
Using the $A.util.removeClass and $A.util.addClass calls seems to work(maybe toggle will work too).  You just need to add the aura:id ="yourcustomid" tag to the <li> and <div>
I used it to change slds-show and slds-active.

Helper function after onclick on the <li> passing through from controler. (changing from a Bill tab to a contact tab)
not pretty, but it is working.  I guess I will need to make a new function for each <li> click to unselect the other tabs and activate the one it clicked on.

 selectContactTab: function(cmp){
         var contact = cmp.find('contactTab');
        $A.util.addClass(contact, "slds-active");
        
        var billingInfo = cmp.find('billTab');
        $A.util.removeClass(billingInfo, "slds-active");
       
        var billInfoDetail = cmp.find('tab-scoped-1');
        $A.util.removeClass(billInfoDetail, "slds-show");
        $A.util.addClass(billInfoDetail, "slds-hide");
        
        var contactInfoDetail = cmp.find('tab-scoped-2');
        $A.util.removeClass(contactInfoDetail, "slds-hide");
        $A.util.addClass(contactInfoDetail, "slds-show");

        $A.enqueueAction(action);
    }
Anil_VaishnavAnil_Vaishnav
<div class="slds-tabs--scoped">
                        <ul class="slds-tabs--scoped__nav" role="tablist">
                            <li class="slds-tabs--scoped__item slds-active gpSessionTab" title="Item One" role="presentation">
                                <a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-scoped-1" onclick="{!c.selectTab}" id="tab-scoped-1__item">Item One</a>
                            </li>
                            <li class="slds-tabs--scoped__item gpSessionTab" title="Item Two" role="presentation">
                                <a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-scoped-2" onclick="{!c.selectTab}" id="tab-scoped-2__item">Item Two</a>
                            </li>
                            <li class="slds-tabs--scoped__item gpSessionTab" 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" onclick="{!c.selectTab}" id="tab-scoped-3__item">Item Three</a>
                            </li>
                        </ul>
                        <div id="tab-scoped-1" class="slds-tabs--scoped__content slds-show gpSessionTabScope" role="tabpanel" aria-labelledby="tab-scoped-1__item">
                            Item One Content
                        </div>
                        <div id="tab-scoped-2" class="slds-tabs--scoped__content slds-hide gpSessionTabScope" role="tabpanel" aria-labelledby="tab-scoped-2__item">
                            Item Two Content
                        </div>
                        <div id="tab-scoped-3" class="slds-tabs--scoped__content slds-hide gpSessionTabScope" role="tabpanel" aria-labelledby="tab-scoped-3__item">
                            Item Three Content
                        </div>
                    </div>


===========
var activeTab = event.target.getAttribute("id");
        $(".gpSessionTab").removeClass("slds-active");
        $("#"+activeTab).parent().addClass("slds-active");
        
        $(".gpSessionTabScope").each(function(){
            var clsName = $(this).attr("class");
            if(clsName.indexOf("slds-show") != -1){
                $(this).removeClass("slds-show");
                $(this).addClass("slds-hide");
            }
        });
        var arr = activeTab.split("__");
        var scopeId = arr[0];
        $("#"+scopeId).removeClass("slds-hide");
        $("#"+scopeId).addClass("slds-show");
        
    }
Mike ArthurMike Arthur
Meanwhile, sometime later...

This is a nice clear example of how to activate/deactivate tabs:
https://sfdcmonkey.com/2016/11/23/how-to-create-lightning-tabs-in-component/
Klaiz BangKlaiz Bang
From experience I know it is very complicated to construct a concept for presentation and it is best to delegate it to people with ability, for whom it is not a difficult task. I know these people already, and I am grateful that I have reached them and asked them for assistance. Fortunately, on company website (https://slidepeak.com/ppt-slide-design) such professionals helped me to figure out exactly where to go for my Powerpoint presentation and obtain the most comprehensive template. I could have surprised a lot of people that way. A redesign of the presentation may also be ordered to enhance the project, which is also normally required.
Sam Smith 60Sam Smith 60
To increase your performance and add some self-confidence ( https://gumroad.com/lindaalduin/p/reasons-why-i-should-write-a-short-book-review ) in your presentation, we pay much attention to a topic. We offer you to present such ideas to create a complete and persuasive academic work