Apex Code Development You need to sign in to do that
Don't have an account?
amrita h 7 How to show different div content in one div block by clicking on different div blocks?
I have a lightning component with 9 div boxes in it. By clicking on these divs, it should the content inside it in another component or another different div box. Is there anyway to do this? I am very new to lightning, so i am not aware of the functionality available in it. Please help me on this.
Code sample is here.
Code sample is here.
<aura:component>
<div onclick="{!c.fire}" id="div1">
<p>Section 1 Content</p>
</div>
<div onclick="{!c.fire}" id="div2">
<p>Section 2 Content</p>
</div>
<div id="content">
Display the content here depending on the Click happens on the above divs. If div 1 clicks it should show section 1 Content. If div 2 clicks it should show section 2 Content.
(If this div content is possible to show in different component also fine.)
</div>
</aura:component>
Greetings to you!
- I read your problem and implemented in my Org.
- Here I am sharing code as per your problem using createComponents[Solved].
- Please implement below codes is your Org.
'ParentComponent.cmp'
<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" access="global" >
<div onclick="{!c.displayDivOne}" id="div1">
<p>Click Here -- Section 1 Content</p>
</div>
<div onclick="{!c.displayDivTwo}" id="div2">
<p>Click Here -- Section 2 Content</p>
</div>
<div >
{!v.body}
</div>
</aura:component>
-------------------------------------------------------------------------------------------------------------------------
'ParentComponentController.js'
({
displayDivOne : function (c, e, h ){
h.displayDivOne_helper(c, e, h);
},
displayDivTwo : function (c, e, h){
h.displayDivTwo_helper(c, e, h);
}
})
-------------------------------------------------------------------------------------------------------------------------
'ParentComponentHelper.js'
({
displayDivOne_helper : function (c, e, h){
try{
console.log('In displayDivOne_helper');
c.set("v.openDetails",true);
$A.createComponent('c:SectionOneCmp',{
},function(contentComponent, status, error){
if(status === "SUCCESS"){
c.set("v.body",contentComponent);
} else {
throw new Error(error);
}
})
}
catch (e)
{
console.log('EError-->'+e);
}
},
displayDivTwo_helper : function (c, e, h){
try{
console.log('In displayDivTwo_helper');
c.set("v.openDetails",true);
$A.createComponent('c:SectionTwoCmp',{
},function(contentComponent, status, error){
if(status === "SUCCESS"){
c.set("v.body",contentComponent);
} else {
throw new Error(error);
}
})
}
catch (e)
{
console.log('EError-->'+e);
}
}
})
-------------------------------------------------------------------------------------------------------------------------
'SectionOneCmp.cmp'
<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" access="global">
<div class="header slds-align_absolute-center">SECTION 1</div>
<div class="content">
<lightning:layout multipleRows="true" title="SECTION 1">
<lightning:layoutItem size="12" class="slds-align_absolute-center slds-text-title_bold">
I AM IN SECTION ONE
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
-------------------------------------------------------------------------------------------------------------------------
'SectionTwoCmp.cmp'
<aura:component implements="forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" access="global">
<div class="header slds-align_absolute-center">SECTION 2</div>
<div class="content">
<lightning:layout multipleRows="true" title="SECTION 2">
<lightning:layoutItem size="12" class="slds-align_absolute-center slds-text-title_bold">
I AM IN SECTION TWO
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
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.
I have uploaded Deepali's files into this new tool. This tool gives a nice view of all files and how they are working. You can also directly deploy to any org if you want. Below is the link:
https://playground.lkatney.com/play/show-child-components-withinig-parent-component
I hope it is fine with Deepali :)
Thanks
There are absolutely no issues with this.
But I would request Amrita to please mark My answer as Best Answer so that others can take help from this question.
Hope no issues.
Thanks.