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 Create Copy to Clipboard or How to Create Clipboard in Lightning Component

Hello friends today post,, How to Create Copy Clipboard in Lightning Component so let us start...... Step=>1.        goto developer Console......                                     File=>New=>Lightning Component                                                                         copyToClipboard.cmp  <aura:component implements="flexipage:availableForAllPageTypes" access="global" >     <div>         <p aura:id="pId">quick brown fox jumps over the lazy dog</p>         <lightning:button iconName="utility:copy_to_clipboard"                           onclick="{!c.copyHardcoreText}"                           label="Copy Text to clipboard"                           aura:id="btn1"/>     </div>       <div>         <lightning:textarea value="hello i am textarea value" aura:id="inputF"/>         <lightning:button iconName

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 Picture</h1>     <div style="padding:100px">         <img src="{!v.oUser.FullPho

How to Create Quick Email Sending in Lightning Component

Hello friends today post, how to send Email using lightning component so let start .... Step=>1. first open your developer console and goto...                                                                          File=>New=>Lightning Component                                    EmailSend.cmp <aura:component controller="EmailSendController" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >         <aura:attribute name="email" type="string"/>     <aura:attribute name="subject" type="string"/>     <aura:attribute name="body" type="string"/>     <aura:attribute name="mailStatus" type="boolean" default="false"/>         <div class="slds-box" style="width:700px;margin-top:10px;margin-left:10px;">     <div class="sld