Show/Hide Multiple Div on basis of Aura:ID in Lightning?

Question

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.

Answer 1

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.

Answer 2

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.