Skip to main content

How to used slds-hide/show class for div hide and show in lightning component

Hello friends today post ,how to create a lightning component to use slds-hide/show class,
very easy to use class and aplly..
so let us start ...

firstly create a lightning component and there are two or three div or anything when you want to hide/show ...
so see given bellow example and udes slds-hide/show class

Step=>1.
                 goto developer console=>File=>New=>Lightning Component

                          sldshideshow.cmp

<aura:component >
    <aura:attribute name="First" type="string" default="slds-show"/>
    <aura:attribute name="Second" type="string" default="slds-hide"/>
   
    <center>
    <div class="slds-box" style="width:300px;height:300px;margin-top:15px;">
        <div class="{!v.First}">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="text-input-id-1">First Section</label>
                <div class="slds-form-element__control">
                    <input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input"/>
                </div>
            </div>
           
            <button class="slds-button slds-button_brand" onclick="{!c.Next}" style="margin-top:10px;">Next</button>   
        </div>
       
        <div class="{!v.Second}">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="text-input-id-1">Second Section</label>
                <div class="slds-form-element__control">
                    <input type="text" id="text-input-id-1" placeholder="Placeholder Text" class="slds-input" />
                </div>
            </div>
        </div>
    </div>
    </center>
</aura:component>

Step=>2.

                            sldshideshowController.js

({
Next : function(component, event, helper) {
        component.set("v.First","slds-hide");
        component.set("v.Second","slds-show");

}
})

                                                   Output:




Thanks!

Buy me a coffeeBuy me a coffee

Comments

Popular posts from this blog

How to Solve Mixed DML Error in APEX Test class #Salesforce

Hello frinds, Today i am talking about , how to solve mixd DML error in Apex, This error mostly come when , yiu are writing Apex Test . When are you insert Setup and non-setup object records in single transaction. Step-1- Writing Apex test class @isTest public class MIXEDDML { @isTest public static void TestData(){ UserRole obj=new UserRole(Name= 'ABC'); insert obj; Profile pf= [Select Id from profile where Name='System Administrator']; String orgId=UserInfo.getOrganizationId(); String dateString=String.valueof(Datetime.now()).replace(' ','').replace(':','').replace('-','') ; User uu=new User(firstname = 'ABC', lastName = 'XYZ', email = 'ak288@test.org', Username = 'ak288@test.org', EmailEncodingK...

How to Create Mark Locations On Google Map With Salesforce Lightning Component

Hello friends today post , how to Mark Locations On Google Map With Salesforce Lightning Component... so let us start.. Step=>1 .                    goto developer console                                                          File=>New =>Apex Class first create apex class to fetch location for mark                                lightningMapController.apxc public with sharing class lightningMapController {     @AuraEnabled     public static list<accountLocationWrapper> getLocation(){         list<accountLocationWrapper> lstALW = new list<accountLocationWrapper>();         /*Query accounts records with billing...