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 show Current User Profile Picture in Lightning Component

Hello frnds today post learn how to show current user profile picture in lightning component so let us start....... Step=>1.            goto developer console and create lightning component               File=>New=>Lighning Component                DisplayUserPhoto.cmp <aura:component controller="LoginUserProfileCtrl"                 implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"                 access="global" >     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>     <aura:attribute name="oUser" type="user" default="{'sobjectType' : 'User'}" />     <h1>Current User Profile Pict...

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...