0

I am trying to hide "nonPaying" aura:id on component initialization, but it's not working. Below is code snippet.

Markup

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        
    <div class="slds-m-around--medium slds-form--compound" >
        <h1 class="slds-page-header__title slds-m-bottom_small slds-align_absolute-center">Payment Information</h1>
        <div aura:id="Paying" class="form-element__group">
            <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-2">
                    <lightning:input aura:id="paymentName" name="pymtName" label="Payment Profile Name"
                        value="{!v.payment.Name}" required="true" disabled="{!v.DisableCheck}" 
                        messageWhenValueMissing="Payment Profile Name Missing"/>
                </div>
                <div class="slds-form-element slds-size--1-of-2">
                    <ui:inputSelect  aura:id="paymethod" label="Payment Method" value="{!v.payment.CTG_Payment_Method__c}" />
                </div>                
            </div>
            
            <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-2">
                    <ui:inputSelect  aura:id="payTerm" label="Payment Term" value="{!v.payment.CTG_Payment_Term__c}" />
                </div>
            </div>                        
        </div>
        
        <h1 aura:id="nonPaying" class="slds-page-header__title slds-m-bottom_small slds-align_absolute-center">Non-Paying Account</h1>
                
        <lightning:button label="Back" onclick="{!c.goBack}" />
        <lightning:button label="Next" onclick="{!c.goNext}" />
    </div>
</aura:component>

Controller

({
    doInit : function(component, event, helper) {   
        var toggleText = component.find("nonPaying");
        $A.util.addClass(toggleText,'toggle');
    },
})

CSS

.THIS.toggle {
    display: none;
}

2 Answers 2

2

You are using the CSS class one level deep within a div tag. For this purpose, your CSS declaration needs to be as below:

.THIS .toggle {
     display: none;
}

Notice the space between .THIS and .toggle.

3
  • Thanks Jayant. there is no space between THIS and toggle. and it worked, if i moved header out of div, but in that case i need to add button again to go to next page. Is there any other way to just hide and un-hide header under same div?
    – Lalit
    Commented Oct 11, 2018 at 22:05
  • Check the other answer by @glls, I would think that should resolve your issue.
    – Jayant Das
    Commented Oct 12, 2018 at 1:13
  • your suggestion solved my problem. i created separate dive for each area and addClass worked very well.
    – Lalit
    Commented Oct 12, 2018 at 19:47
2

an even better way of 'hiding' the element would be to simply use the slds-hide class and the $A.util.toggle Class method

({
    doInit : function(component, event, helper) {   
        var toggleText = component.find("nonPaying");
        $A.util.toggleClass(toggleText,'slds-hide');
    },
})
2
  • Thanks glls, it's working on Init. I also have application event firing from my previous component and based on condition i need to show and hide it dynamically. I used slds-show class to un-hide, it but it's not working.
    – Lalit
    Commented Oct 12, 2018 at 15:34
  • you might want to open a new questions with the specifics and details of 'not working'
    – glls
    Commented Oct 12, 2018 at 15:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .