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
Karunat1Karunat1 

Show / Hide Div in lightning

How to show/Hide div using "Document.getElementsByClassName()" in Lightning? 
Best Answer chosen by Karunat1
Khan AnasKhan Anas (Salesforce Developers) 
Hi Karuna,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <div class="myTest" title="testTitle" >        
        <div class="test2" >
            Khan
            Anas
        </div>
    </div>
    <lightning:button aura:id="hide" label="Hide" onclick="{!c.hide}" />
    <lightning:button aura:id="show" label="Show" onclick="{!c.show}" />
</aura:component>

Controller: 
({
    hide : function(component,event,helper){
        var elements = document.getElementsByClassName("myTest");
        elements[0].style.display = 'none';
    },
    
    show : function(component,event,helper){
        var elements = document.getElementsByClassName("myTest");
        elements[0].style.display = 'block';
    }
})


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas​

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Karuna,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <div class="myTest" title="testTitle" >        
        <div class="test2" >
            Khan
            Anas
        </div>
    </div>
    <lightning:button aura:id="hide" label="Hide" onclick="{!c.hide}" />
    <lightning:button aura:id="show" label="Show" onclick="{!c.show}" />
</aura:component>

Controller: 
({
    hide : function(component,event,helper){
        var elements = document.getElementsByClassName("myTest");
        elements[0].style.display = 'none';
    },
    
    show : function(component,event,helper){
        var elements = document.getElementsByClassName("myTest");
        elements[0].style.display = 'block';
    }
})


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas​
This was selected as the best answer
Karunat1Karunat1
Thanks Anas!!