0

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");
}

})

  • You could use of a HTML5 data attribute. You'll be able to pass the current iteration's record ID to the button(It might have to be a HTML Button) and retrieve the record Id in your controller.js – codeyinthecloud Aug 7 '18 at 15:39
  • Why you are not using the one provided by Salesforce more info here lightning:accordion – itzmukeshy7 Aug 7 '18 at 15:45
  • cause I have to show 2-3 fields as a list instead of a label of the section – Marina Bank Aug 7 '18 at 16:11
1

You could use a HTML5 data attribute or a HTML Id because aura:Id does not accept dynamic id's. You can replace your Lightning button with HTML button and get the contact Id dynamically like below.

<aura:iteration items="{!v.contacts}" var="con">  
<button type="button" onclick="{!c.handleClick}" id=
{!con.Id}>Edit</button> 
</aura:iteration>

handleClick : function(component, event, helper) {
//get the clicked entity Id
var conId= event.target.id;
alert(conId); 
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.