I cannot use lightning:accordion cause I need to show two fields on the label of the section. Right now, if I click on any section, it opens all sections How can I open only the section I clicked & get Contact Id of the clicked section?
Component:
<div class="">
<aura:iteration items="{!v.contacts}" var="con">
<section class="slds-clearfix" style="cursor: pointer;" onclick="{!c.sectionOne}">
<div class="slds-grid slds-grid_vertical-align-start">
<div class="slds-col slds-size_1-of-12">
<div class="" >
<lightning:icon class="slds-show" aura:id="details" iconName="utility:chevronright" size="x-small" alternativeText="Indicates add"/>
<lightning:icon class="slds-hide" aura:id="details" iconName="utility:chevrondown" size="x-small" alternativeText="Indicates dash"/>
</div>
</div>
<div class="slds-col">
<ul class="">
<li class="slds-text-title_caps">{!con.Name} </li>
<li>{!con.Email} </li>
</ul>
</div>
<div class="slds-col">
<div class="slds-float--right">
<lightning:button variant="base" label="EDIT" title="EDIT" onclick="{!c.handleClick}"/>
</div>
</div>
</div>
</section>
<div class="slds-hide slds-p-around--medium" aura:id="details">
{!con.Phone}
</div>
</aura:iteration>
</div>
Controller.js
({
doInit : function(component, event, helper) {
helper.getRecords(component);
},
sectionOne : function(component, event, helper) {
helper.helper(component,event,'details');
},
handleClick : function(component, event, helper) {
var id = component.get("v.con");
alert(id);
},
})
Helper.js
({
getRecords : function(cmp) {
var action = cmp.get("c.getContacts");
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
cmp.set("v.contacts", response.getReturnValue());
}
});
$A.enqueueAction(action);
},
helper : function(component,event,secId) {
var con = component.find(secId);
con.forEach(function(element) {
$A.util.toggleClass(element, "slds-hide");
});
$A.util.addClass(event.target, "slds-show");
}
})
