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

How to create Dynamic Generic Tree grid using LWC

Hello frnds todat i am talking about , how to create tree-grid using lwc Step-1:- First create Custom metadata, Click setup and In Quich Search box type " Custom metadata " Step-2:- Click on Custom metadata and click on "New custom metadata type" type custom metadata name and save after that create custom feilds, list given below image after that click on "manage" enter field api name according to your requirement Example given below Step-3:- Create Apex class Name is "SLMT_GenericHierarchiesController" global class SLMT_GenericHierarchiesController { @AuraEnabled(cacheable=true) global static List getFullHierarchies(Id recordId,String parentRelationship){ Id topLevelParentId = SLMT_GenericHierarchiesController.getUltimateParent(recordId,parentRelationship); List treeColumns = SLMT_GenericHierarchiesController.describeHierarchyMappings(recordId); List additionalFields =new List (); ...