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

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.

  • I don't know why the one with SLDS didn't come to my mind. Thanks btw. – Kamal Thakur Jul 11 '18 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 '18 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 '18 at 13:31

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.