1

I have Lightning Component and I want to Show/Hide Multiple Div using Aura:ID. Currently, am doing this:

Lightning Component

<div class="chat_invitation" id="">
    <div class="chat-headline">
        <span class="chat-toggle show"><i id="icon1" class="{!v.toggleIcon}" aria-hidden="true" onclick="{!c.toggleButton}"></i></span>
    </div>

    <div class="chat-text" aura:id="toggle1">
        <p>hi</p>
    </div>

    <div class="chat-start" aura:id="toggle2">
         <iframe src="A URL" style="height: 40px; margin-left: 4px;" />
    </div>
    <div class="chat-call" aura:id="toggle3">
        <p> <span class="number">PHONE NO.</span></p>
    </div>

    <div class="chat-support" aura:id="toggle4">
        <p>Need customer support? <a href='URL' target='_blank'>Click here</a>.</p>
    </div>
</div>

Controller:

toggleButton : function(component, event, helper) {
    var label = component.get("v.toggleIcon");
    if(label == 'fa fa-chevron-down'){
        component.set("v.toggleIcon","fa fa-chevron-up");
        $A.util.addClass(component.find("toggle1"), "toggle");
        $A.util.addClass(component.find("toggle2"), "toggle");
        $A.util.addClass(component.find("toggle3"), "toggle");
        $A.util.addClass(component.find("toggle4"), "toggle");
    }else {
        component.set("v.toggleIcon","fa fa-chevron-down");
        $A.util.removeClass(component.find("toggle1"), "toggle");
        $A.util.removeClass(component.find("toggle2"), "toggle");
        $A.util.removeClass(component.find("toggle3"), "toggle");
        $A.util.removeClass(component.find("toggle4"), "toggle");
    }
}

CSS:

.THIS .toggle {
    display: none;
}

The thing is, this is not the best way to do this. Any direction would be great. TIA.

2 Answers 2

3

First of all, you can use slds-hide, the SLDS built-in for hiding an element:

$A.util.addClass(component.find("toggle1"), "slds-hide");

Second, you could have simply wrapped everything in a single top-level div:

<div aura:id="toggleArea">
    <div class="chat-text" aura:id="toggle1">
        <p>hi</p>
    </div>

    <div class="chat-start" aura:id="toggle2">
         <iframe src="A URL" style="height: 40px; margin-left: 4px;" />
    </div>
    <div class="chat-call" aura:id="toggle3">
        <p> <span class="number">PHONE NO.</span></p>
    </div>

    <div class="chat-support" aura:id="toggle4">
        <p>Need customer support? <a href='URL' target='_blank'>Click here</a>.</p>
    </div>
</div>

Which would reduce your code to simply:

if(label == 'fa fa-chevron-down') {
    component.set("v.toggleIcon","fa fa-chevron-up");
    $A.util.addClass(component.find("toggleArea"), "slds-hide");
}else {
    component.set("v.toggleIcon","fa fa-chevron-down");
    $A.util.removeClass(component.find("toggleArea"), "slds-hide");
}

Other optimizations are also possible, but this would be enough to get you started.


Alternatively, you could have also chosen to name each element the same:

    <div class="chat-text" aura:id="divArea">
        <p>hi</p>
    </div>

    <div class="chat-start" aura:id="divArea">
         <iframe src="A URL" style="height: 40px; margin-left: 4px;" />
    </div>
    <div class="chat-call" aura:id="divArea">
        <p> <span class="number">PHONE NO.</span></p>
    </div>

    <div class="chat-support" aura:id="divArea">
        <p>Need customer support? <a href='URL' target='_blank'>Click here</a>.</p>
    </div>

In which case you could toggle them all using forEach:

if(label == 'fa fa-chevron-down') {
    component.set("v.toggleIcon","fa fa-chevron-up");
    component.find("divArea").forEach(
        area => $A.util.addClass(area, "slds-hide")
    );
}else {
    component.set("v.toggleIcon","fa fa-chevron-down");
    component.find("divArea").forEach(
        area => $A.util.removeClass(area, "slds-hide")
    );
}

This has roughly the same performance characteristics as the code you've written, since re-rendering only occurs after each function call.

3
  • I don't know why the one with SLDS didn't come to my mind. Thanks btw. Jul 11, 2018 at 6:19
  • 1
    @KamalThakur You're welcome. I'm still learning slds myself, but it definitely seems to be pretty complete.
    – sfdcfox
    Jul 11, 2018 at 6:21
  • 1
    If you need to support IE 11 make sure you don't use arrow functions '=>' in your JavaScript as you'll get errors.
    – Clint
    Jul 11, 2018 at 13:31
0

In Aura Components, you can also run conditions to show/hide classes. SLDS styles has a class called slds-hide, which will toggle the hidden attribute.

<aura:attribute name="someFieldValue" type="String" default=""/>

<div id="hideDiv" class="{!if(not(equals(v.someFieldValue, '')), 'slds-show', '')}"> 
    SHOW/HIDE TEXT
</div>

The controller/helper would just need something like:

if(condition){component.set("v.someFieldValue", "something else");

I suppose it would be disingenuous to say you're not using Javascript. The Aura framework runs the Javascript that toggles the class, but you're not actually writing Javascript.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.