I have created a activity timeline custom component also added a collapsible section in my component but when i am clicking on one section it is opening all the section same is happening at the time of closing...
I am not able to fix this issue please help me to expand only one section at the time of clicking also for closing using lightning collapsible icon.
Apex Class -
public class ActivityTimeLineForEmailMessage {
@AuraEnabled
public static List < EmailMessage > getMessageDetail(String emailMessageId) {
// System.debug('emailMessageId' + emailMessageId);
List<EmailMessage> MessageDetail = new List<EmailMessage>([select id, Subject, TextBody, FromAddress, ToAddress, RelatedToId, ParentId from EmailMessage where ParentId = :emailMessageId ]);
return MessageDetail;
}
}
Application :-
< aura:application extends="force:slds">
< qwerty:ActivityTimeLineGrazitti />
< /aura:application>
Component :
< aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" access="global" controller="ActivityTimeLineForEmailMessage">
<aura:attribute name="EmailMsgs" type="EmailMessage[]" />
<aura:attribute name="recordId" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="demo-only" style="width:400px">
<ul class="slds-timeline">
<aura:iteration var="oneMsg" items="{!v.EmailMsgs}">
<li>
<div class="slds-timeline__item_expandable slds-timeline__item_email slds-is-open">
<span class="slds-assistive-text">email</span>
<div class="slds-media">
<div class="slds-media__figure">
<button class="slds-button slds-button_icon" title="Toggle details for Re: Mobile conversation on Monday with the new global team" aria-controls="email-item-narrow" aria-expanded="true" onclick="{!c.emailsection}">
<section class="slds-clearfix">
<div class="slds-float--left ">
<lightning:icon class="slds-show" aura:id="emaildetail" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
<lightning:icon class="slds-hide" aura:id="emaildetail" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
</div>
</section>
<span class="slds-assistive-text">Toggle details for Re: Mobile conversation on Monday with the new global team</span>
</button>
<div class="slds-icon_container slds-icon-standard-email slds-timeline__icon" title="email">
<lightning:icon iconName="action:email" size="x-small" alternativeText="Indicates mail sign"/>
</div>
</div>
<div class="slds-media__body">
<div class="slds-grid slds-grid_align-spread slds-timeline__trigger">
<div class="slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space">
<h3 class="slds-truncate" title="Subject of Send/Receive mail">
<a href="javascript:void(0);">
<strong> {!oneMsg.Subject} </strong>
</a>
</h3>
<div class="slds-no-flex">
<span class="slds-icon_container slds-icon-utility-groups" title="Group email">
<lightning:icon class="icongreen" iconName="utility:arrowup"/>
<span class="slds-assistive-text">Group email</span>
</span>
</div>
</div>
<div class="slds-timeline__actions slds-timeline__actions_inline">
<p class="slds-timeline__date">
<lightning:formattedDateTime value="{!oneMsg.MessageDate}" year="numeric" month="numeric" day="numeric" hour="2-digit" minute="2-digit" timeZoneName="short" />
</p>
</div>
</div>
<p class="slds-m-horizontal_xx-small">
<a href="javascript:void(0);">You</a> emailed
<a href="javascript:void(0);">{!oneMsg.ToAddress}</a>
</p>
<article class="slds-box slds-timeline__item_details slds-theme_shade slds-m-top_x-small slds-m-horizontal_xx-small slds-p-around_medium" aura:id="emaildetail" id="email-item-narrow" aria-hidden="false">
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">From Address</span>
<span class="slds-text-body_medium slds-truncate" title="Jackie Dewar">
<a href="javascript:void(0);">{!oneMsg.FromAddress}</a>
</span>
</li>
<li class="slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small">
<span class="slds-text-title slds-p-bottom_x-small">To Address</span>
<span class="slds-text-body_medium slds-truncate" title="Lea Chan">
<a href="javascript:void(0);">{!oneMsg.ToAddress}</a>
</span>
</li>
</ul>
<div>
<span class="slds-text-title">Text Body</span>
<p class="slds-p-top_x-small">
<!-- <aura:unescapedHtml value="{!oneMsg.HtmlBody}"/> -->
<p class="linewidth"> {!oneMsg.TextBody} </p>
</p>
</div>
<lightning:button name="modal" label="Reply" aura:id="{!oneMsg.Id}" value="{!oneMsg.Id}" onclick="{!c.replyEmailmsg}" />
</article>
</div>
</div>
</div>
</li>
</aura:iteration>
< /ul>
< /div>
< /aura:component>
Controller:-
({
doInit : function(component, event, helper) {
var currentRec = component.get("v.recordId");
console.log('>>>>>>'+currentRec);
helper.getEmailMessages(component,event,currentRec);
},
emailsection : function(component, event, helper) {
var acc = component.find('emaildetail');
$A.util.toggleClass(acc, 'slds-show');
helper.helperFun(component,event,'emaildetail');
},
})
![Helper:-]()
({
helperFun : function(component,event,secId) {
var acc = component.find(secId);
for(var cmp in acc) {
$A.util.toggleClass(acc[cmp], 'slds-show');
$A.util.toggleClass(acc[cmp], 'slds-hide');
}
},
getEmailMessages : function(component,event,currentRec) {
console.log('###helper record id##'+currentRec);
var action = component.get("c.getMessageDetail");
action.setParams({
"emailMessageId": currentRec
});
action.setCallback(this, function (response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.EmailMsgs", response.getReturnValue());
} else if (state === "INCOMPLETE") {
console.log("No response from server or client is offline.")
var myErrMsg='No response from server or client is offline.';
} else if (state === "ERROR") {
console.log("Error: ");
}
});
$A.enqueueAction(action);
},