1

I'm doing a lightning component using lightning:accordion.

I wanted to use a Plus/Minus symbol but it seems like you can't custom the icon of accordions.

So i found some code enabling to do something like a Plus/Minus symbol, but in my case when i click on it it's opening and closing every sections related.

So i'm wondering if there is any way to avoid this issue and open the specific Description i need and not all related.

enter image description here

Here is my ModesOperatoires.cmp :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="FolderItemController">    

    <aura:attribute name="compteContents" type="List"/>
    <aura:attribute name="contactContents" type="List"/>
    <aura:attribute name="factureContents" type="List"/>
    
    <aura:attribute name="activeSections" type="List" default="[]" />
    
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <lightning:card>
        <lightning:accordion activeSectionName="{! v.activeSections }">
                <lightning:accordionSection name="Compte" label="Compte">
                    <aura:iteration items="{!v.compteContents}" var="compteContent">
                    <aura:set attribute="body">
                        <div class="slds-grid slds-gutters">
                            <div class="containerTitle slds-col">
                              <div class="slds-grid slds-has-flexi-truncate">
                                  <lightning:icon iconName="standard:file" size="small"/>
                                  <p class="slds-truncate titleLink">
                                      <a class="documentLink" data-folderitemid="{!compteContent.Id}" onclick="{!c.handleClick}">{!compteContent.Title}</a>
                                  </p>
                              </div>
                            </div>
                            <div class="slds-page-header slds-col descriptionSection" style="cursor: pointer;" onclick="{!c.sectionOne}">
                                <section class="slds-clearfix">
                                    <div class="slds-float--left ">
                                        <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                                        <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                                    </div>
                                </section>
                            </div>
                        </div>
                        <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
                            <dl class="slds-dl--horizontal">
                                <dt class="slds-dl--horizontal__label">Description :</dt>
                                <dd class="slds-dl--horizontal__detail">{!compteContent.Description}</dd>
                            </dl>
                        </div>
                    </aura:set>
                    </aura:iteration>
                </lightning:accordionSection>
                <lightning:accordionSection name="Contact" label="Contact">
                    <aura:iteration items="{!v.contactContents}" var="contactContent">
                        <aura:set attribute="body">
                        <div class="slds-grid slds-gutters">
                            <div class="containerTitle slds-col">
                              <div class="slds-grid slds-has-flexi-truncate">
                                  <lightning:icon iconName="standard:file" size="small"/>
                                  <p class="slds-truncate titleLink">
                                      <a class="documentLink" data-folderitemid="{!contactContent.Id}" onclick="{!c.handleClick}">{!contactContent.Title}</a>
                                  </p>
                              </div>
                            </div>
                            <div class="slds-page-header slds-col descriptionSection" style="cursor: pointer;" onclick="{!c.sectionOne}">
                                <section class="slds-clearfix">
                                    <div class="slds-float--left ">
                                        <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                                        <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                                    </div>
                                </section>
                            </div>
                        </div>
                        <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
                            <dl class="slds-dl--horizontal">
                                <dt class="slds-dl--horizontal__label">Description :</dt>
                                <dd class="slds-dl--horizontal__detail">{!contactContent.Description}</dd>
                            </dl>
                        </div>
                    </aura:set>
                    </aura:iteration>
                </lightning:accordionSection>
                <lightning:accordionSection name="Facture" label="Facture">
                    <aura:iteration items="{!v.factureContents}" var="factureContent">
                        <aura:set attribute="body">
                        <div class="slds-grid slds-gutters">
                            <div class="containerTitle slds-col">
                              <div class="slds-grid slds-has-flexi-truncate">
                                  <lightning:icon iconName="standard:file" size="small"/>
                                  <p class="slds-truncate titleLink">
                                      <a class="documentLink" data-folderitemid="{!factureContent.Id}" onclick="{!c.handleClick}">{!factureContent.Title}</a>
                                  </p>
                              </div>
                            </div>
                            <div class="slds-page-header slds-col descriptionSection" style="cursor: pointer;" onclick="{!c.sectionOne}">
                                <section class="slds-clearfix">
                                    <div class="slds-float--left ">
                                        <lightning:icon class="slds-show" aura:id="articleOne" iconName="utility:add" size="x-small" alternativeText="Indicates add"/>
                                        <lightning:icon class="slds-hide" aura:id="articleOne" iconName="utility:dash" size="x-small" alternativeText="Indicates dash"/>
                                    </div>
                                </section>
                            </div>
                        </div>
                        <div class="slds-hide slds-p-around--medium" aura:id="articleOne">
                            <dl class="slds-dl--horizontal">
                                <dt class="slds-dl--horizontal__label">Description :</dt>
                                <dd class="slds-dl--horizontal__detail">{!factureContent.Description}</dd>
                            </dl>
                        </div>
                    </aura:set>
                    </aura:iteration>
                </lightning:accordionSection>
        </lightning:accordion>      
    </lightning:card> 
</aura:component>

My ModesOperatoiresController.js :

({
    init: function(component, event, helper) {
        helper.getModesOperatoires(component);
    },
    
    handleClick: function (component, event, helper) {
        var recordId = event.target.dataset.folderitemid;

        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": recordId
        });
        navEvt.fire();
    },
     sectionOne : function(component, event, helper) {
       helper.helperFun(component,event,'articleOne');
    }
})

and finally my ModesOperatoiresHelper.js :

({
    getModesOperatoires : function(component) {
        
        var getAccountItems = component.get("c.getCompteContentItems");
        getAccountItems.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.compteContents", response.getReturnValue());
            }
        });
          
        var getContactItems = component.get("c.getContactContentItems");
        getContactItems.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.contactContents", response.getReturnValue());
            }
        });
        
        var getFactureItems = component.get("c.getFactureContentItems");
        getFactureItems.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.factureContents", response.getReturnValue());
            }
        });
        
        $A.enqueueAction(getAccountItems);
        $A.enqueueAction(getContactItems);
        $A.enqueueAction(getFactureItems);
    },
    
     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');
       }
           
    },
})

If anyone can tell me how to avoid to open every sections for Descriptions when i click on one of them.

Thanks.

1 Answer 1

1

Each aura:accordionSection should be inside aura:iteration, and must each have a unique name attribute.

<lightning:accordion activeSectionName="{! v.activeSections }">
    <aura:iteration items="{!v.compteContents}" var="compteContent">
        <lightning:accordionSection name="{!compteContent.name}" label="Compte">

You will need to alter your compteContents attribute to include a name property that you should set to a unique value.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .