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 Floating Marquee

Hello frnds today post , how to create floating Marquee in Lightning Component so let us begin............. Step=>1. goto developer console                             File=>New=>Lightning Component                    FloatingMarq.cmp                  <aura:component>       <aura:handler name="init" value="{!this}" action="{!c.doInit}" />     <aura:attribute name="intervalId" type="Integer" default="0"/>       <div id="parentDIV" style="overflow:hidden">         <p style="position:relative;" id="tofloat">             <b><span style="color:red">Important Note : </span>             I am Floating (Left to Right) Imformation...</b...

Create Overlays with the New Modal Component

Hello friends, Now modal tag is available in #LWC, we can create a modal using the #LWC Standard tag. snapshot given below with code. Step-1 Create LWC component Step-2 Add below code Step-3 I am showing how my component is look like. Thanks for reading