function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sylvain DEVOSSylvain DEVOS 

slds-hide and javascript

Hello.

I am a beginner in development Salesforce, and I have a problem.
I try to show a section (div id:account) in a component but unsuccessfully.

Can you tell me where is my error.

Component 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
...
<button class="slds-button slds-button_outline-brand" onclick="{!c.DisplayAccount}">Add Account</button>
...
  <div aura:id="Account" class="{!if(v.displayedSection == 'Account','slds-show','slds-hide')}">
        <article class="slds-card">
            <div class="slds-card__header slds-grid">
                <header class="slds-media slds-media_center slds-has-flexi-truncate">
                    <div class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-account" title="account">
                            <lightning:icon iconName="standard:account" size="xx-small" alternativeText="-"/>
                            <span class="slds-assistive-text">account</span>
                        </span>
                    </div>
                </header>
            </div>
        </article>
    </div>
</aura:component>

Controller 
DisplayAccount : function(component, event, helper) {
        component.set("v.displayedSection","Account");
    }

 
Best Answer chosen by Sylvain DEVOS
Alain CabonAlain Cabon
Hello,

Dynamically Showing or Hiding Markup
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_show_hide_markup.htm
  
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <button class="slds-button slds-button_outline-brand" onclick="{!c.DisplayAccount}">Add Account</button>
    
    <div aura:id="Account" class="toggle">
        <article class="slds-card">
            <div class="slds-card__header slds-grid">
                <header class="slds-media slds-media_center slds-has-flexi-truncate">
                    <div class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-account" title="account">
                            <lightning:icon iconName="standard:account" size="xx-small" alternativeText="-"/>
                            <span class="slds-assistive-text">account2</span>
                        </span>
                    </div>
                </header>
            </div>
        </article>
    </div>
</aura:component>
  
/*toggleCss.css*/
.THIS.toggle {
    display: none;
}
  
/*toggleCssController.js*/
({
    DisplayAccount : function(component, event, helper) {
        var toggleDiv = component.find("Account");
        $A.util.toggleClass(toggleDiv, "toggle");
    }
})

Modifying DOM Elements Managed by the Lightning Component Framework

You can modify CSS classes for a component outside a renderer by using the $A.util.addClass(), $A.util.removeClass(), and $A.util.toggleClass() methods.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_dom_modify_framework.htm

IMPORTANT:   .THIS.toggle  could be .THIS .toggle    for you (with a space between .THIS and .toggle (class))
This little difference is very important (otherwise that will never work for you).
 

All Answers

Alain CabonAlain Cabon
Hello,

Dynamically Showing or Hiding Markup
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_show_hide_markup.htm
  
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <button class="slds-button slds-button_outline-brand" onclick="{!c.DisplayAccount}">Add Account</button>
    
    <div aura:id="Account" class="toggle">
        <article class="slds-card">
            <div class="slds-card__header slds-grid">
                <header class="slds-media slds-media_center slds-has-flexi-truncate">
                    <div class="slds-media__figure">
                        <span class="slds-icon_container slds-icon-standard-account" title="account">
                            <lightning:icon iconName="standard:account" size="xx-small" alternativeText="-"/>
                            <span class="slds-assistive-text">account2</span>
                        </span>
                    </div>
                </header>
            </div>
        </article>
    </div>
</aura:component>
  
/*toggleCss.css*/
.THIS.toggle {
    display: none;
}
  
/*toggleCssController.js*/
({
    DisplayAccount : function(component, event, helper) {
        var toggleDiv = component.find("Account");
        $A.util.toggleClass(toggleDiv, "toggle");
    }
})

Modifying DOM Elements Managed by the Lightning Component Framework

You can modify CSS classes for a component outside a renderer by using the $A.util.addClass(), $A.util.removeClass(), and $A.util.toggleClass() methods.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_dom_modify_framework.htm

IMPORTANT:   .THIS.toggle  could be .THIS .toggle    for you (with a space between .THIS and .toggle (class))
This little difference is very important (otherwise that will never work for you).
 
This was selected as the best answer
Sylvain DEVOSSylvain DEVOS
That works !!
Thanks for the help.
Alain CabonAlain Cabon
Ok is it solved?
 
Sylvain DEVOSSylvain DEVOS
Yes, it's solved.