Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
meghna nmeghna n 

hide show component

I have a piece of code as follows inside my lightning component
 <aura:attribute name="showAdvancedSearchcmp" type="Boolean"
default="false"/>

 <lightning:layoutItem flexibility="auto" padding="around-small">
                <p></p>
                <br></br>
                <lightning:buttonIcon iconName="utility:search" size="medium" class="color"  onclick="{! c.advancedSearch}" alternativeText="search" />
                <p>Advanced Search</p>
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:card>      
    <aura:if isTrue="{!v.showAdvancedSearchcmp}">
        <div class="slds-p-bottom_xx-small"></div>
        <lightning:card title="">
            <c:GPS_COMP_AdvancedProvider></c:GPS_COMP_AdvancedProvider>
        </lightning:card>
        </lightning:layoutItem>

advancedSearch : function (component,event,helper) {
        component.set("v.showAdvancedSearchcmp",true);
       
    },

when I click the Advanced Search icon it will show up the component GPS_COMP_AdvancedProvider.

My requirement when I click the Advanced Search icon it will show the component GPS_COMP_AdvancedProvider.
Now when I click the Advanced Search icon again it should hide the component GPS_COMP_AdvancedProvider.

Please tell me how I can achieve this.

meghna
Best Answer chosen by meghna n
Deepali KulshresthaDeepali Kulshrestha
Hi Meghna,
Greetings to you!
    
- I read your problem 'hide show component'.
- Please use below code [Solved] : -

Component : -

    <lightning:buttonIcon iconName="utility:search"  size="medium" class="color"  onclick="{! c.toggle}" alternativeText="search" />
    <p>Advanced Search</p>
    <lightning:card title="Your component" aura:id="text">
        <div >You compoent here</div>
    </lightning:card>
    
Controller : -

    toggle : function(component, event, helper) {
        let toggleText = component.find("text");
        $A.util.toggleClass(toggleText, "toggle");
    }
    
CSS : -

    .THIS.toggle {
        display: none;
    }
    
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.

All Answers

Deepali KulshresthaDeepali Kulshrestha
Hi Meghna,
Greetings to you!
    
- I read your problem 'hide show component'.
- Please use below code [Solved] : -

Component : -

    <lightning:buttonIcon iconName="utility:search"  size="medium" class="color"  onclick="{! c.toggle}" alternativeText="search" />
    <p>Advanced Search</p>
    <lightning:card title="Your component" aura:id="text">
        <div >You compoent here</div>
    </lightning:card>
    
Controller : -

    toggle : function(component, event, helper) {
        let toggleText = component.find("text");
        $A.util.toggleClass(toggleText, "toggle");
    }
    
CSS : -

    .THIS.toggle {
        display: none;
    }
    
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.
This was selected as the best answer
Ajay K DubediAjay K Dubedi
Hi meghna ,

There is no need of if condition,You should Call child component inside div tag and in div tag define an id and set class="slds-hide". When we click on buttonIcon then call advancedSearch method and using toggleClass set div class slds-show.
 
 aura component :-
  
<aura:component description="ShowHideComonent">
 <lightning:layoutItem flexibility="auto" padding="around-small">
                
                <lightning:buttonIcon iconName="utility:search" size="medium" class="color"  onclick="{! c.advancedSearch}" alternativeText="search" />
                <p>Advanced Search</p>
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:card>      
        <div class="slds-p-bottom_xx-small"></div>
        <lightning:card title="">
            <div class="slds-hide" aura:id="newButtonDiv">
                <c:GPS_COMP_AdvancedProvider></c:GPS_COMP_AdvancedProvider>
            </div>           
        </lightning:card>
        </lightning:layoutItem>
</aura:component>       
helper method :- 
advancedSearch : function (component,event,helper) {
    var newButton = c.find("newButtonDiv");
    $A.util.toggleClass(newButton, "slds-show");      
},
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
meghna nmeghna n
Hi deepali

This was exactly what I was looking for.
It worked.
Thanks very much. 

meghna