Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
amrita h 7amrita 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. 
<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>

 
Deepali KulshresthaDeepali Kulshrestha
Hi amrita,
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.
lkatneylkatney
Hi Amrita,

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
Deepali KulshresthaDeepali Kulshrestha
Hi lkatney,

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.